:root{
  --bg:#f3f5f9;--card:#fff;--text:#1f2937;--muted:#6b7280;--line:#e5e7eb;
  --primary:#2563eb;--primary-d:#1d4ed8;--ok:#16a34a;--warn:#d97706;--danger:#dc2626;--orange:#ea580c;
  --radius:12px;--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--primary);text-decoration:none}

/* ===== 顶部导航 ===== */
.navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.navbar .inner{max-width:1320px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;gap:6px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--text);margin-right:20px;white-space:nowrap}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.nav-links{display:flex;gap:2px;flex:1;overflow-x:auto}
.nav-links a{padding:8px 12px;border-radius:8px;color:#4b5563;font-weight:500;white-space:nowrap}
.nav-links a:hover{background:#f1f5f9;color:var(--text)}
.nav-links a.active{background:#eff6ff;color:var(--primary)}
.nav-links .cnt{display:inline-block;min-width:16px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;text-align:center;margin-left:3px;vertical-align:middle}
.nav-user{display:flex;align-items:center;gap:10px;color:var(--muted);white-space:nowrap}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.nav-user a.logout{color:var(--danger);padding:6px 10px;border-radius:8px}
.nav-user a.logout:hover{background:#fef2f2}

/* ===== 布局 / 卡片 ===== */
.container{max-width:1320px;margin:0 auto;padding:22px 20px 40px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.card-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:16px;font-weight:600}
.card-title small{font-weight:400;color:var(--muted);font-size:13px}
details.card>summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"展开 ▾";font-size:12px;font-weight:400;color:var(--muted);margin-left:auto}
details.card[open]>summary::after{content:"收起 ▴"}
details.card[open]>summary{margin-bottom:14px}

/* ===== 统计卡片 ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;align-items:center;gap:14px;color:var(--text);border:2px solid transparent;transition:.15s}
.stat:hover{transform:translateY(-2px)}
.stat.on{border-color:var(--primary)}
.stat .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat .num{font-size:26px;font-weight:700;line-height:1.1}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:2px}
.stat.blue .ico{background:#eff6ff}.stat.amber .ico{background:#fffbeb}.stat.red .ico{background:#fef2f2}.stat.green .ico{background:#f0fdf4}.stat.purple .ico{background:#f5f3ff}

/* ===== 提示条 ===== */
.alert{border-radius:10px;padding:12px 16px;margin-bottom:14px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.alert-ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert details{flex:1}
.alert summary{cursor:pointer;font-weight:600;list-style:none}
.alert summary::-webkit-details-marker{display:none}
.alert summary::after{content:"展开 ▾";font-weight:400;font-size:12px;margin-left:8px;opacity:.7}
.alert details[open] summary::after{content:"收起 ▴"}
.alert ul{margin:8px 0 0;padding-left:18px;columns:2;column-gap:30px}
.alert li{margin:3px 0;break-inside:avoid}

/* ===== 表单 ===== */
.form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=file],select,textarea{padding:9px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff;color:var(--text);outline:none;transition:.15s;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
label.lbl{display:block;margin-top:14px;margin-bottom:4px;font-weight:600;font-size:13px;color:#374151}
.w-full{width:100%}
.hint{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.6}
.hint a{font-weight:500}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:500;cursor:pointer;background:var(--primary);color:#fff;transition:.15s;white-space:nowrap;font-family:inherit}
.btn:hover{background:var(--primary-d)}
.btn-ghost{background:#fff;color:#374151;border-color:#d1d5db}.btn-ghost:hover{background:#f3f4f6}
.btn-danger{background:var(--danger)}.btn-danger:hover{background:#b91c1c}
.btn-orange{background:var(--orange)}.btn-orange:hover{background:#c2410c}
.btn-success{background:var(--ok)}.btn-success:hover{background:#15803d}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn-block{width:100%;justify-content:center;padding:11px;font-size:15px}

/* ===== 筛选胶囊 ===== */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;color:var(--muted);font-size:13px}
.pills a{padding:5px 12px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:13px}
.pills a:hover{background:#e2e8f0}
.pills a.on{background:var(--primary);color:#fff}

/* ===== 表格 ===== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;min-width:1150px}
th{background:#f8fafc;color:#475569;font-weight:600;font-size:13px;letter-spacing:.03em;padding:11px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #f1f5f9;white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f8fafc}
tr.warn td{background:#fffbeb}tr.warn:hover td{background:#fef3c7}
tr.danger td{background:#fef2f2}tr.danger:hover td{background:#fee2e2}
tr.editing td{background:#eff6ff!important}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge-ok{background:#dcfce7;color:#166534}.badge-warn{background:#fef3c7;color:#92400e}.badge-danger{background:#fee2e2;color:#991b1b}
.days{font-weight:600}
.ops{display:flex;gap:6px}
.ops a{padding:4px 9px;border-radius:6px;font-size:12px;font-weight:500}
.ops .edit{color:var(--primary);background:#eff6ff}.ops .renew{color:var(--orange);background:#fff7ed}.ops .del{color:var(--danger);background:#fef2f2}
.ops .save{color:#fff;background:var(--ok)}.ops .cancel{color:#475569;background:#f1f5f9}
.ops a:hover{filter:brightness(.93)}
.remark{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;color:var(--muted);vertical-align:middle}
mark{background:#fde68a;padding:0 2px;border-radius:2px}
.empty{text-align:center;color:#9ca3af;padding:40px!important}
.mono{font-family:Menlo,Consolas,monospace;font-size:13px}
tr.editing td input[type=text]{padding:6px 8px;width:100%;min-width:80px}

/* ===== 年/月/日 输入 ===== */
.dategroup{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:0 6px;transition:.15s}
.dategroup input{border:none!important;box-shadow:none!important;padding:8px 2px!important;text-align:center;min-width:0!important;width:auto}
.dategroup .d-y{width:52px!important}.dategroup .d-m,.dategroup .d-d{width:30px!important}
.dategroup span{color:#9ca3af;font-size:12px}
.dategroup:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
tr.editing .dategroup{padding:0 4px}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--primary);cursor:pointer;vertical-align:middle}

/* ===== 分页 ===== */
.pager{display:flex;justify-content:center;gap:4px;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{min-width:34px;padding:6px 10px;text-align:center;border-radius:8px;background:#fff;border:1px solid var(--line);color:#374151}
.pager a:hover{background:#f3f4f6}.pager span.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ===== Toast ===== */
#toast{position:fixed;top:72px;right:20px;background:#111827;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);display:none;z-index:99}
#toast.show{display:block;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== 登录 / 安装 ===== */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 50%,#6366f1 100%);padding:20px}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:16px;padding:36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.auth-card.wide{max-width:560px}
.auth-card .brand{justify-content:center;margin:0 0 6px;font-size:20px}
.auth-card .brand .logo{width:44px;height:44px;font-size:24px}
.auth-card .sub{text-align:center;color:var(--muted);margin-bottom:22px;font-size:13px}
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[type=email]{width:100%;margin-top:6px}
.auth-card .btn-block{margin-top:20px}
.section{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-weight:600;color:var(--primary);font-size:14px}
code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.ch{display:none;padding:12px 14px;background:#f8fafc;border-radius:8px;margin-top:10px;border:1px solid var(--line)}.ch.on{display:block}
.ch label.lbl:first-child{margin-top:0}

/* ===== 照片预览 ===== */
.photo-preview {
    display: inline-block;
    transition: transform 0.2s;
}
.photo-preview:hover {
    transform: scale(1.05);
}
.photo-preview img {
    object-fit: cover;
}

/* ============================================================
   手机端自适应（≤ 768px）
   ============================================================ */
@media (max-width: 768px) {
    /* 顶部导航 */
    .navbar .inner {
        padding: 0 10px;
        height: 50px;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .brand .t {
        display: none;
    }
    .brand {
        font-size: 15px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .brand .logo {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 7px;
    }
    .nav-links {
        gap: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-links a {
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
    }
    .nav-links a .cnt {
        font-size: 10px;
        min-width: 14px;
        padding: 0 4px;
    }
    .nav-user {
        gap: 6px;
        flex-shrink: 0;
    }
    .nav-user .avatar {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .nav-user span {
        font-size: 12px;
        display: none;
    }
    .nav-user a.logout {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* 容器 */
    .container {
        padding: 12px 8px;
    }

    /* 卡片 */
    .card {
        padding: 12px 12px;
        border-radius: 8px;
        margin-bottom: 12px;
    }
    .card-title {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .card-title form {
        width: 100%;
    }

    /* 统计卡片 */
    .stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .stat {
        padding: 12px 10px;
        gap: 10px;
        border-radius: 8px;
        flex-direction: column;
        text-align: center;
    }
    .stat .ico {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 8px;
    }
    .stat .num {
        font-size: 18px;
    }
    .stat .lbl {
        font-size: 11px;
    }

    /* 表单 */
    .form-row {
        gap: 6px;
    }
    .form-row input[type="text"],
    .form-row input[type="password"],
    .form-row select {
        font-size: 13px;
        padding: 7px 10px;
        flex: 1 1 100%;
        min-width: 60px;
    }
    .form-row .btn {
        padding: 7px 14px;
        font-size: 13px;
    }
    .form-row .dategroup input {
        padding: 5px 2px !important;
        font-size: 12px;
    }
    .form-row .dategroup .d-y {
        width: 38px !important;
    }
    .form-row .dategroup .d-m,
    .form-row .dategroup .d-d {
        width: 22px !important;
    }
    .form-row .plabel {
        font-size: 11px;
    }

    /* 详情页顶部 */
    .top {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .top h2 {
        font-size: 16px !important;
        gap: 4px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
    .top h2 .badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }
    .top .actions {
        gap: 4px !important;
        width: 100% !important;
    }
    .top .actions .btn,
    .top .actions button {
        font-size: 12px !important;
        padding: 5px 10px !important;
        flex: 1 0 auto;
        min-width: 50px;
        justify-content: center;
    }

/* ===== 信息列表（电脑端默认） ===== */
.dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 24px;
}
.dl div {
    padding: 6px 0;
    border-bottom: 1px dashed #eef2f7;
}
.dl b {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

    /* 详情页照片 */
    .photo-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .photo-row > div {
        background: #f8fafc;
        border-radius: 8px;
        padding: 12px !important;
    }
    .photo-row > div .photo-preview img {
        width: 100px !important;
        height: 100px !important;
    }

    /* 保单卡片 */
    .pols {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .polcard {
        padding: 10px 12px !important;
    }
    .polcard .big {
        font-size: 17px !important;
    }
    .polcard h4 {
        font-size: 13px !important;
    }

    /* 表格 */
    .tablewrap {
        border-radius: 6px;
        margin: 0 -4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tablewrap table {
        min-width: 800px !important;
        font-size: 12px !important;
    }
    .tablewrap table th,
    .tablewrap table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    .tablewrap table th {
        font-size: 10px !important;
        padding: 6px 4px !important;
    }
    .tablewrap table td input[type="text"] {
        font-size: 11px !important;
        padding: 4px 4px !important;
        min-width: 50px !important;
    }
    .tablewrap table td .ops a {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    .tablewrap table td .badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    .tablewrap table td .dategroup input {
        padding: 3px 1px !important;
        font-size: 10px !important;
    }
    .tablewrap table td .dategroup .d-y {
        width: 30px !important;
    }
    .tablewrap table td .dategroup .d-m,
    .tablewrap table td .dategroup .d-d {
        width: 18px !important;
    }
    .tablewrap table td .dategroup span {
        font-size: 10px !important;
    }
    .tablewrap table td .remark {
        max-width: 60px !important;
    }

    /* 照片上传 */
    .photo-grid {
        grid-template-columns: 1fr !important;
    }
    .photo-upload-area {
        padding: 12px !important;
    }
    .photo-upload-area .photo-preview img {
        width: 80px !important;
        height: 80px !important;
    }
    .photo-upload-area input[type="file"] {
        font-size: 12px;
        width: 100%;
    }

    /* 分页 */
    .pager {
        gap: 3px;
        margin-top: 12px;
    }
    .pager a,
    .pager span {
        min-width: 28px;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    /* 提示条 */
    .alert {
        padding: 10px 12px !important;
        font-size: 13px !important;
        flex-wrap: wrap;
    }
    .alert ul {
        columns: 1 !important;
    }

    /* Lightbox */
    .lightbox-overlay {
        padding: 20px;
    }
    .lightbox-overlay .close {
        top: 16px;
        right: 20px;
        font-size: 28px;
    }
    .lightbox-overlay .nav-btn {
        font-size: 28px;
        padding: 12px 8px;
    }
    .lightbox-overlay .nav-btn.prev {
        left: 8px;
    }
    .lightbox-overlay .nav-btn.next {
        right: 8px;
    }
    .lightbox-overlay .info {
        font-size: 12px;
        padding: 4px 12px;
        bottom: 16px;
    }

    /* 弹窗 */
    .modal-box {
        padding: 16px;
        width: 95vw;
    }
    .modal-box h3 {
        font-size: 14px;
    }
    .modal-box label.opt {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Toast */
    #toast {
        top: 60px;
        right: 12px;
        padding: 10px 14px;
        font-size: 13px;
        max-width: 85vw;
    }

    /* 登录/安装页 */
    .auth-card {
        padding: 24px 18px;
        margin: 10px;
    }
    .auth-card .brand {
        font-size: 17px;
    }
    .auth-card .brand .logo {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    /* 统计页面 */
    .kpis {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .kpi {
        padding: 12px;
    }
    .kpi .n {
        font-size: 20px;
    }
    .kpi .l {
        font-size: 11px;
    }
    .grid2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .chart {
        height: 120px;
        gap: 4px;
        padding-top: 10px;
    }
    .col .val {
        font-size: 9px;
        height: 12px;
    }
    .col .lbl {
        font-size: 9px;
        margin-top: 4px;
    }
    .hrow {
        font-size: 12px;
        gap: 6px;
    }
    .hrow span {
        width: 70px;
        font-size: 11px;
    }
    .hrow .hb {
        height: 10px;
    }
    .hrow b {
        width: 28px;
        font-size: 11px;
    }
    .legend {
        font-size: 10px;
        gap: 8px;
    }

    /* 批量操作栏 */
    .bbar {
        font-size: 12px;
        padding: 6px 10px;
        gap: 4px;
        flex-wrap: wrap;
    }
    .bbar .btn-sm {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* 设置页 */
    .ch {
        padding: 8px 10px;
    }
    .ch label.lbl {
        font-size: 12px;
    }
    .ch input[type="text"],
    .ch input[type="email"] {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* ============================================================
   超小屏手机（≤ 480px）
   ============================================================ */
@media (max-width: 480px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .dl {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
    .dl div {
        font-size: 13px !important;
        padding: 5px 10px !important;
    }
    .pols {
        grid-template-columns: 1fr !important;
    }
    .photo-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .photo-row > div .photo-preview img {
        width: 80px !important;
        height: 80px !important;
    }
    .top h2 {
        font-size: 15px !important;
    }
    .top .actions .btn,
    .top .actions button {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-width: 44px;
    }
    .top h2 .badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }
    .top h2 span[style*="background:#f3f4f6"] {
        font-size: 11px !important;
        padding: 1px 8px !important;
    }
    .tablewrap table {
        min-width: 650px !important;
        font-size: 11px !important;
    }
    .tablewrap table th,
    .tablewrap table td {
        padding: 4px 4px !important;
        font-size: 10px !important;
    }
    .photo-preview img {
        width: 80px !important;
        height: 80px !important;
    }
    .auth-card {
        padding: 18px 14px;
    }
    .polcard .big {
        font-size: 15px !important;
    }
    .polcard h4 {
        font-size: 12px !important;
    }
    .lightbox-overlay {
        padding: 16px;
    }
    .lightbox-overlay .close {
        top: 12px;
        right: 16px;
        font-size: 28px;
    }
    .lightbox-overlay .nav-btn {
        font-size: 24px;
        padding: 8px 4px;
    }
    .lightbox-overlay .nav-btn.prev {
        left: 4px;
    }
    .lightbox-overlay .nav-btn.next {
        right: 4px;
    }
    .lightbox-overlay .info {
        font-size: 11px;
        padding: 4px 12px;
        bottom: 12px;
    }
}

/* ============================================================
   平板端（769px - 1024px）
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .kpis {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid2 {
        grid-template-columns: 1fr 1fr;
    }
    .container {
        padding: 16px 14px;
    }
    .tablewrap table {
        min-width: 1000px;
    }
}

/* ===== 首页电话号码放大 ===== */
#custTable .c-phone {
    font-size: 14px !important;
}