* { box-sizing: border-box; }
    body { margin: 0; padding: 32px; background: #f8fafc; color: #334155;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; }
    .wrap { max-width: 1152px; margin: 0 auto; }
    header { display: flex; justify-content: space-between; align-items: center;
             margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #e2e8f0; }
    .hd-left { display: flex; align-items: center; gap: 16px; }
    .logo { width: 40px; height: 40px; background: #2563eb; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 700; font-size: 18px; }
    h1 { margin: 0; font-size: 22px; font-weight: 700; color: #1e293b; }
    .muted { color: #64748b; font-size: 13px; margin: 4px 0 0; }
    .badge { display: flex; align-items: center; gap: 8px; padding: 5px 12px;
             border-radius: 999px; background: #f0fdf4; border: 1px solid #bbf7d0;
             color: #15803d; font-size: 13px; font-weight: 600; }
    .dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; }
    .grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 24px; margin-bottom: 32px; }
    @media (min-width: 768px) { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
    .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
    .stat { padding: 20px; }
    .stat .k { font-size: 12px; font-weight: 700; text-transform: uppercase;
               color: #64748b; margin: 0 0 6px; letter-spacing: .02em; }
    .stat .v { font-size: 30px; font-weight: 700; color: #1e293b; line-height: 1.1; }
    .stat .v.blue { color: #2563eb; } .stat .v.green { color: #059669; }
    .panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
             box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; }
    .panel-hd { padding: 20px; border-bottom: 1px solid #e2e8f0;
                display: flex; justify-content: space-between; align-items: center; }
    .panel-hd h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1e293b; }
    a.link { color: #2563eb; font-size: 13px; font-weight: 600; text-decoration: none; }
    a.link:hover { text-decoration: underline; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    thead th { background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 600;
               text-transform: uppercase; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
    tbody td { padding: 14px 16px; font-size: 14px; color: #475569; border-bottom: 1px solid #f1f5f9; }
    tbody tr:hover { background: #f8fafc; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
    .empty { padding: 16px; color: #94a3b8; }
    footer { margin-top: 24px; text-align: center; font-size: 12px; color: #94a3b8; }