/* ============================================================
   DXTool（大雄工具）设计系统（参考 Code Times 设计规范）
   主色 #5B6BD9 ｜ 渐变 #7c5bd8 ｜ 背景 #f9fafb
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* 色板 */
    --primary: #5B6BD9;
    --primary-dark: #4a58bc;
    --primary-light: #8b96e8;
    --gradient: linear-gradient(90deg, #5B6BD9, #7c5bd8);
    --gradient-bg: linear-gradient(135deg, #eef0fc 0%, #f6f1fd 55%, #f4eefd 100%);
    --text-title: #111827;
    --text-body: #374151;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --bg: #f9fafb;
    --bg-card: #ffffff;
    --bg-subtle: #f3f4f6;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --tag-bg: #eef0fe;
    --success: #52c41a;
    --warning: #faad14;
    --danger: #ef4444;

    /* 字号 */
    --fs-body: 14px;
    --fs-section: 20px;
    --fs-page: 24px;
    --fs-hero: 32px;

    /* 圆角 */
    --radius-card: 12px;
    --radius-btn: 8px;
    --radius-tag: 6px;
    --radius-pill: 999px;
}

/* 防止整站横向滑动：优先用 clip，它不创建滚动容器，避免破坏 position:sticky（文章目录依赖）；
   旧浏览器不支持 clip 时回退到 hidden */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text-title);
    font-size: var(--fs-body);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; cursor: pointer; }

/* ===== 原型标注面板（非设计部分） ===== */
.annotation {
    position: fixed; top: 0; right: 0; width: 300px; height: 100vh;
    background: #fffbe6; border-left: 2px solid #ffe58f;
    padding: 16px; overflow-y: auto; font-size: 13px; line-height: 1.8; z-index: 999;
}
.annotation h3 { font-size: 14px; color: #d48806; margin-bottom: 12px; border-bottom: 1px solid #ffe58f; padding-bottom: 8px; }
.annotation h4 { font-size: 13px; color: #333; margin: 14px 0 6px; }
.annotation p, .annotation li { color: #666; }
.annotation ul { padding-left: 18px; }
.annotation code { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.annotation .tag { display: inline-block; background: var(--primary); color: #fff; font-size: 11px; padding: 0 6px; border-radius: 3px; margin-right: 4px; }
.annotation .tag.new { background: var(--success); }
.annotation .tag.change { background: #fa8c16; }
.annotation .tag.fix { background: #ff4d4f; }
.annotation .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; border: 1px solid rgba(0,0,0,.08); }

/* ===== 布局 ===== */
.page { margin-right: 300px; min-height: 100vh; display: flex; flex-direction: column; }
/* 注意：container 上不要加 overflow-x:hidden，它会让内部的 position:sticky 失效
   （文章页右侧目录依赖 sticky），且会静默裁掉溢出内容掩盖真实布局问题 */
.container { max-width: 1024px; margin: 0 auto; padding: 0 16px; width: 100%; }
main { flex: 1; }

/* ===== 顶部导航 ===== */
.nav {
    position: sticky; top: 0; z-index: 50; height: 64px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.nav-inner { max-width: 1024px; margin: 0 auto; padding: 0 16px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; }
.logo {
    width: 28px; height: 28px; border-radius: 8px; background: var(--gradient);
    color: #fff; font-size: 12px; letter-spacing: -0.3px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 18px; font-weight: 700; }
.nav-links { display: flex; gap: 24px; font-size: 14px; font-weight: 500; color: var(--text-body); align-items: center; }
.nav-links a { transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--primary); }
.nav-links a.active { color: var(--primary); font-weight: 700; }
.nav-login-btn {
    padding: 7px 20px; border-radius: var(--radius-btn); background: var(--gradient);
    color: #fff !important; font-weight: 600; font-size: 13px;
    box-shadow: 0 2px 8px rgba(91,107,217,.25); transition: all .2s;
}
.nav-login-btn:hover { box-shadow: 0 4px 14px rgba(91,107,217,.45); transform: translateY(-1px); }
.nav-toggle {
    display: none; /* 桌面端隐藏，≤768px 显示 */
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer;
}
.nav-toggle-bar {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text-title); transition: transform .25s, opacity .25s;
}

/* ===== 按钮 ===== */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: var(--radius-btn); background: var(--gradient);
    color: #fff; font-size: 14px; font-weight: 500; border: none; cursor: pointer;
    transition: all .2s;
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(91,107,217,.35); transform: translateY(-1px); }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: var(--radius-btn); background: #fff;
    color: var(--text-body); font-size: 14px; border: 1px solid var(--border);
    cursor: pointer; transition: all .2s;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 18px; font-size: 13px; }

/* ===== 卡片 ===== */
.card {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.08); }

/* ===== Tag ===== */
.tag-purple { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: var(--tag-bg); color: var(--primary); font-size: 12px; }
.tag-green { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #f6ffed; color: var(--success); font-size: 12px; border: 1px solid #b7eb8f; }
.tag-hot   { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #fff7e6; color: #d4380d; font-size: 12px; border: 1px solid #ffd591; white-space: nowrap; }
.tag-gray { display: inline-block; padding: 2px 8px; border-radius: var(--radius-tag); background: #fafafa; color: var(--text-muted); font-size: 12px; border: 1px solid var(--border); }

/* ===== 页头 ===== */
.page-head { background: #fff; border-bottom: 1px solid var(--border-light); padding: 32px 0 28px; }
.page-head h1 { font-size: var(--fs-page); font-weight: 700; }
.page-head .sub { margin-top: 8px; font-size: 14px; color: var(--text-secondary); }

/* ===== 分类 Tab（胶囊） ===== */
.tab-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tab-chip {
    display: inline-flex; align-items: center; padding: 7px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: #fff; font-size: 13px; color: var(--text-body);
    transition: all .15s; cursor: pointer;
}
.tab-chip:hover { border-color: var(--primary); color: var(--primary); }
.tab-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; }

/* ===== 工具卡片 ===== */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.tool-card {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card);
    padding: 22px; display: flex; flex-direction: column; align-items: flex-start;
    transition: all .25s; cursor: pointer;
}
.tool-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 20px rgba(91,107,217,.12); transform: translateY(-2px); }
.tool-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 14px; }
.tool-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; font-weight: 600;
}
.tool-icon.blue { background: #5B6BD9; }
.tool-icon.purple { background: #722ed1; }
.tool-icon.cyan { background: #13c2c2; }
.tool-icon.green { background: #52c41a; }
.tool-icon.orange { background: #fa8c16; }
.tool-icon.red { background: #f5222d; }
.tool-icon.magenta { background: #eb2f96; }
.tool-icon.geekblue { background: #2f54eb; }
.tool-icon.gray { background: #bfbfbf; }
.tool-name { font-size: 16px; font-weight: 600; color: var(--text-title); margin-bottom: 6px; }
.tool-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; min-height: 44px; }
.tool-footer { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.tool-foot-note { font-size: 12px; color: var(--text-muted); }

/* ===== Hero ===== */
.hero {
    position: relative; overflow: hidden; background: var(--gradient-bg);
    text-align: center; padding: 64px 16px 80px;
}
.hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(91,107,217,.08); top: -160px; right: -80px; }
.hero::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(124,91,216,.07); bottom: -120px; left: -60px; }
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero h1 { font-size: var(--fs-hero); font-weight: 700; color: var(--text-title); }
.hero .sub { margin-top: 12px; font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
.hero-cta { margin-top: 28px; display: flex; justify-content: center; gap: 12px; }
.hero-search {
    margin: 28px auto 0; max-width: 520px; display: flex;
    background: #fff; border-radius: var(--radius-pill); overflow: hidden;
    box-shadow: 0 4px 20px rgba(91,107,217,.12); border: 1px solid var(--border);
}
.hero-search input {
    flex: 1; border: none; outline: none; padding: 13px 22px; font-size: 14px;
}
.hero-search button {
    border: none; background: var(--gradient); color: #fff; padding: 0 28px;
    font-size: 14px; font-weight: 500; cursor: pointer;
}

/* ===== 统计条 ===== */
.stats { margin-top: -32px; position: relative; z-index: 5; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat { padding: 20px 16px; text-align: center; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-label { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

/* ===== 区块 ===== */
.section { margin-top: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-head h2 { font-size: var(--fs-section); font-weight: 600; }
.more { font-size: 13px; color: var(--primary); }
.more:hover { text-decoration: underline; }

/* ===== 文章卡片 ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 20px; }
.doc-card { display: block; padding: 20px; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.08); }
.doc-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.doc-summary { margin-top: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.doc-meta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.doc-date { font-size: 12px; color: var(--text-muted); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 胶囊 chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.chip {
    display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text-body);
    transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--tag-bg); }

/* ===== 页脚 ===== */
.footer { background: var(--bg-subtle); border-top: 1px solid var(--border); margin-top: 48px; }
.footer-inner {
    max-width: 1024px; margin: 0 auto; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--primary); }
.footer-icp a { color: var(--text-secondary); }
.footer-icp a:hover { color: var(--primary); }

/* ===== 登录/注册（左右分栏） ===== */
.auth-page { display: flex; min-height: 100vh; }
.auth-brand {
    width: 45%; min-height: 100vh; background: linear-gradient(135deg, #5B6BD9 0%, #7c5bd8 100%);
    color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; overflow: hidden;
}
.auth-brand::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(255,255,255,.05); top: -210px; right: -210px; }
.auth-brand::after { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.07); bottom: -96px; left: -96px; }
.auth-brand-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; z-index: 2; }
.auth-brand-logo .icon {
    width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: bold;
}
.auth-brand-logo .name { font-size: 28px; font-weight: 600; letter-spacing: 1px; }
.auth-brand-slogan { font-size: 15px; opacity: .82; margin-bottom: 60px; z-index: 2; }
.auth-brand-points { z-index: 2; font-size: 14px; line-height: 2.6; opacity: .92; }
.auth-brand-points div { display: flex; align-items: center; gap: 12px; }
.auth-brand-points .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.auth-form-side { flex: 1; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px; }
.auth-form-box { max-width: 380px; width: 100%; margin: 0 auto; }
.auth-title { font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 8px; }
.auth-sub { font-size: 14px; color: #8c8c8c; margin-bottom: 32px; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; font-size: 14px; color: #262626; margin-bottom: 6px; }
.auth-field label .req { color: var(--danger); margin-right: 4px; }
.auth-input {
    width: 100%; height: 42px; border: 1px solid #d9d9d9; border-radius: 7px;
    padding: 0 12px; font-size: 14px; transition: all .2s;
}
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.13); }
.auth-btn-main {
    width: 100%; height: 44px; border: none; border-radius: 7px; background: var(--primary);
    color: #fff; font-size: 15px; cursor: pointer; transition: background .2s;
}
.auth-btn-main:hover { background: #7485e3; }
.auth-form-foot { text-align: center; margin-top: 24px; font-size: 14px; color: #8c8c8c; }
.auth-link { color: var(--primary); }
.auth-link:hover { text-decoration: underline; }

/* ===== 表单通用 ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-btn); font-size: 14px; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.13);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .grid-4, .grid-3, .tool-grid { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .hero h1 { font-size: 24px; }

    /* 移动端导航：汉堡按钮 */
    .nav-toggle { display: inline-flex; }
    .nav.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* 移动端导航：右侧滑出抽屉（absolute 相对 .nav，避免 backdrop-filter 破坏 fixed 定位） */
    .nav-links {
        position: absolute; top: 64px; right: 0; height: calc(100vh - 64px);
        width: min(78vw, 300px); flex-direction: column; align-items: stretch;
        gap: 2px; background: #fff; padding: 16px; margin: 0;
        box-shadow: -8px 0 24px rgba(15,23,42,.10);
        transform: translateX(105%); transition: transform .28s ease;
        overflow-y: auto;
    }
    .nav.open .nav-links { transform: translateX(0); }
    .nav-links a { padding: 12px 14px; border-radius: 8px; font-size: 15px; white-space: normal; }
    .nav-links a:hover { background: var(--bg-subtle); }
    .nav-links a.active { background: var(--tag-bg); }
    .nav-login-btn { margin-top: auto; text-align: center; padding: 12px 20px; }
    .nav-login-btn:hover { background: var(--gradient); box-shadow: 0 2px 8px rgba(91,107,217,.25); transform: none; }

    /* 移动端页脚：链接换行居中 */
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
}

/* 抽屉打开时锁定页面滚动 + 半透明遮罩 */
@media (max-width: 768px) {
    body.menu-open { overflow: hidden; }
    body.menu-open::before {
        content: ''; position: fixed; inset: 0; z-index: 40;
        background: rgba(15, 23, 42, .45);
    }
}

/* ===== 小屏微调（≤480px） ===== */
@media (max-width: 480px) {
    .hero { padding: 44px 16px 64px; }
    .hero h1 { font-size: 22px; }
    .hero-search button { padding: 0 18px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats { margin-top: -20px; }
    .stat { padding: 14px 12px; }
    .stat-num { font-size: 20px; }
    .stat-label { font-size: 12px; }
    .section-head h2 { font-size: 17px; }
}

/* ============================================================
   管理后台布局（参考 Code Times PR 系列：深色侧边栏）
   ============================================================ */
.admin-layout { min-height: 100vh; background: #f0f2f5; }
.admin-header {
    height: 64px; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; position: sticky; top: 0; z-index: 10;
}
.admin-header .logo { display: flex; align-items: center; gap: 10px; }
.admin-header .logo-icon {
    width: 32px; height: 32px; background: #001529; color: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold;
}
.admin-header .logo-text { font-size: 18px; font-weight: 600; color: #262626; }
.admin-header .admin-user { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #595959; font-size: 14px; }
.admin-header .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.admin-body { display: flex; }
.admin-sider { width: 208px; min-height: calc(100vh - 64px); background: #001529; padding: 16px 0; flex-shrink: 0; }
.admin-menu-item {
    height: 40px; line-height: 40px; padding: 0 24px; color: rgba(255,255,255,.65);
    font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.admin-menu-item:hover { color: #fff; }
.admin-menu-item.active { background: var(--primary); color: #fff; }
.admin-content { flex: 1; padding: 24px; }

.admin-card { background: #fff; border-radius: 8px; padding: 20px 24px; }
.admin-page-title { font-size: 16px; font-weight: 600; color: #262626; margin-bottom: 16px; }

/* 查询表单 */
.query-form { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.query-item label { display: block; font-size: 13px; color: #595959; margin-bottom: 6px; }
.query-input, .query-select {
    width: 180px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px;
    padding: 0 11px; font-size: 14px;
}
.query-input:focus, .query-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(91,107,217,.2); }
.query-btns { display: flex; gap: 8px; }
.admin-btn { height: 32px; padding: 0 15px; border-radius: 6px; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.admin-btn.primary { background: var(--primary); color: #fff; }
.admin-btn.primary:hover { background: #7485e3; }
.admin-btn.default { background: #fff; border-color: #d9d9d9; color: #595959; }
.admin-btn.default:hover { border-color: var(--primary); color: var(--primary); }
.admin-btn.danger { background: #fff; border-color: #ffccc7; color: #ff4d4f; }
.admin-btn.danger:hover { background: #ff4d4f; color: #fff; }

/* 工具栏 */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.admin-toolbar-title { font-size: 15px; font-weight: 600; color: #262626; }

/* 表格 */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table thead th {
    background: #fafafa; color: #262626; font-weight: 600; text-align: left;
    padding: 12px 16px; border-bottom: 1px solid #f0f0f0; white-space: nowrap;
}
.admin-table tbody td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #595959; }
.admin-table tbody tr:hover { background: #f5f9ff; }
.admin-tag { display: inline-block; font-size: 12px; padding: 0 7px; height: 22px; line-height: 20px; border-radius: 4px; border: 1px solid; }
.admin-tag.blue { color: var(--primary); background: #e6f7ff; border-color: #91d5ff; }
.admin-tag.green { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; }
.admin-tag.red { color: #ff4d4f; background: #fff2f0; border-color: #ffccc7; }
.admin-tag.orange { color: #fa8c16; background: #fff7e6; border-color: #ffd591; }
.admin-tag.gray { color: #8c8c8c; background: #fafafa; border-color: #e5e7eb; }
.op-link { color: var(--primary); cursor: pointer; margin-right: 12px; }
.op-link:hover { color: #7485e3; }
.op-link.danger { color: #ff4d4f; }
.op-link.danger:hover { color: #ff7875; }

/* 后台分页 */
.admin-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 16px; font-size: 14px; color: #595959; }
.admin-page-btn {
    min-width: 32px; height: 32px; line-height: 30px; text-align: center;
    border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; background: #fff; padding: 0 8px;
}
.admin-page-btn.active { border-color: var(--primary); color: var(--primary); }

/* 开关 */
.admin-switch {
    position: relative; width: 44px; height: 22px; background: var(--primary);
    border-radius: 11px; cursor: pointer; display: inline-block; vertical-align: middle;
    transition: background .2s; border: none;
}
.admin-switch::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 2px; left: 24px; transition: left .2s;
}
.admin-switch.off { background: #bfbfbf; }
.admin-switch.off::after { left: 2px; }

/* ============================================================
   工单页（前台公开站风格）
   ============================================================ */
.ticket-tabs { display: flex; gap: 8px; margin-top: 20px; border-bottom: 1px solid var(--border-light); }
.ticket-tab {
    padding: 10px 20px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s;
}
.ticket-tab:hover { color: var(--primary); }
.ticket-tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }

.ticket-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px; margin-top: 20px; }

.ticket-form-item { margin-bottom: 18px; }
.ticket-form-label { display: block; font-size: 13.5px; color: var(--text-body); margin-bottom: 8px; font-weight: 500; }
.ticket-form-label .required { color: #ff4d4f; margin-right: 2px; }
.ticket-input, .ticket-textarea, .ticket-select {
    width: 100%; border: 1px solid #d9dce5; border-radius: 10px; padding: 10px 14px;
    font-size: 14px; font-family: inherit; color: var(--text-title);
    transition: border-color .2s, box-shadow .2s;
}
.ticket-input:focus, .ticket-textarea:focus, .ticket-select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,107,217,.15);
}
.ticket-textarea { height: 140px; resize: vertical; line-height: 1.7; }
.ticket-form-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* 工单状态标签 */
.tk-status { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 6px; border: 1px solid; }
.tk-pending { color: #fa8c16; background: #fff7e6; border-color: #ffd591; }
.tk-processing { color: var(--primary); background: var(--tag-bg); border-color: #c5cbf2; }
.tk-resolved { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; }
.tk-closed { color: #8c8c8c; background: #fafafa; border-color: var(--border); }

/* 工单列表行 */
.tk-row { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border-light); }
.tk-row:last-child { border-bottom: none; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14.5px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.tk-op { flex-shrink: 0; font-size: 13px; color: var(--primary); font-weight: 500; cursor: pointer; }
.tk-op:hover { text-decoration: underline; }