:root {
      --bg: #f5f7fb;
      --panel: rgba(255,255,255,.82);
      --panel-strong: rgba(255,255,255,.96);
      --text: #182033;
      --muted: #667085;
      --line: rgba(22,32,51,.09);
      --shadow: 0 18px 50px rgba(23, 34, 58, .10);
      --shadow-soft: 0 10px 28px rgba(23, 34, 58, .08);
      --blue: #2563eb;
      --blue-soft: #eaf1ff;
      --green: #059669;
      --green-soft: #e9f8f1;
      --amber: #d97706;
      --amber-soft: #fff3df;
      --red: #dc2626;
      --red-soft: #fff0f0;
      --gray-soft: #eef2f7;
      --radius: 24px;
      --radius-sm: 14px;
      font-family: "Microsoft YaHei", "Source Han Sans SC", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(14, 165, 233, .13), transparent 28%),
        linear-gradient(135deg, #f8fbff 0%, var(--bg) 42%, #eef3fb 100%);
      color: var(--text);
      min-height: 100vh;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: none; }
    .app { width: min(1480px, calc(100vw - 36px)); margin: 0 auto; padding: 28px 0 34px; }
    .hero {
      position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; padding: 30px;
      background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.66)); box-shadow: var(--shadow);
    }
    .hero::before { content: ""; position:absolute; inset:-80px -40px auto auto; width: 260px; height:260px; border-radius:999px; background: rgba(37,99,235,.12); filter: blur(6px); }
    .hero-inner { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap: 22px; }
    h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
    .subtitle { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
    .hero-tags { display:flex; flex-wrap: wrap; gap:10px; justify-content:flex-end; min-width: 280px; }
    .pill { display:inline-flex; align-items:center; gap:7px; padding: 8px 12px; border-radius:999px; background: rgba(255,255,255,.72); border:1px solid var(--line); color:#344054; font-size:13px; white-space:nowrap; }
    .grid { display:grid; gap: 16px; }
    .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 18px; }
    .card, .panel {
      position: relative; overflow:hidden; border:1px solid var(--line); border-radius: var(--radius); background: var(--panel);
      box-shadow: var(--shadow-soft); backdrop-filter: blur(16px);
    }
    .spotlight { --mx: 50%; --my: 50%; }
    .spotlight::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(37,99,235,.16), transparent 34%);
      opacity:0; transition: opacity .18s ease;
    }
    .spotlight:hover::after { opacity:1; }
    .stat-card { min-height: 118px; padding: 20px; transition: transform .18s ease, box-shadow .18s ease; }
    .stat-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 48px rgba(23,34,58,.12); }
    .stat-label { color: var(--muted); font-size: 13px; }
    .stat-value { margin-top: 10px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
    .stat-note { margin-top: 8px; color: #7b8798; font-size: 12px; }
    .toolbar, .filters { margin-top: 16px; padding: 16px; display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
    .button-row { display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
    .btn { border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 14px; background:#fff; color:#26334d; border:1px solid var(--line); box-shadow: 0 6px 16px rgba(23,34,58,.06); transition:.16s ease; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(23,34,58,.10); }
    .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; border-color: transparent; }
    .btn-danger { background: var(--red-soft); color: var(--red); }
    .btn-soft { background: var(--blue-soft); color: var(--blue); }
    .input, .select, .textarea { border:1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.86); color: var(--text); outline:none; padding: 11px 12px; min-height: 42px; }
    .input:focus, .select:focus, .textarea:focus { border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
    .search { min-width: 320px; flex: 1 1 380px; }
    .select { min-width: 136px; }
    .table-panel { margin-top: 16px; padding: 0; }
    .table-headline { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
    .table-title { font-weight: 800; font-size: 17px; }
    .table-count { color: var(--muted); font-size:13px; }
    .table-wrap { overflow:auto; max-height: 680px; }
    table { width:100%; border-collapse:separate; border-spacing:0; min-width: 1150px; }
    th { position: sticky; top:0; z-index:1; background: rgba(248,250,252,.96); color:#475467; text-align:left; font-size: 13px; padding: 13px 14px; border-bottom:1px solid var(--line); }
    td { padding: 14px; border-bottom:1px solid var(--line); vertical-align:top; font-size: 14px; }
    tr:hover td { background: rgba(37,99,235,.025); }
    .name-cell { font-weight:800; max-width: 240px; }
    .subtle { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .badge { display:inline-flex; align-items:center; gap:5px; padding: 5px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
    .badge-blue { background: var(--blue-soft); color: var(--blue); }
    .badge-green { background: var(--green-soft); color: var(--green); }
    .badge-amber { background: var(--amber-soft); color: var(--amber); }
    .badge-red { background: var(--red-soft); color: var(--red); }
    .badge-gray { background: var(--gray-soft); color:#667085; }
    .op { display:flex; flex-wrap:wrap; gap:8px; min-width: 218px; }
    .op .btn { padding: 7px 9px; border-radius: 10px; font-size:12px; }
    .empty { padding: 54px 20px; text-align:center; color: var(--muted); }
    .footer-note { margin-top: 16px; padding: 16px 18px; color:#5f6b7c; font-size: 13px; line-height:1.7; }
    .modal-backdrop { display:none; position:fixed; inset:0; z-index:20; background: rgba(15,23,42,.38); backdrop-filter: blur(7px); align-items:center; justify-content:center; padding: 18px; }
    .modal-backdrop.show { display:flex; }
    .modal { width:min(980px, 100%); max-height: 92vh; overflow:auto; border-radius: 28px; border:1px solid rgba(255,255,255,.50); background: rgba(255,255,255,.96); box-shadow: 0 28px 80px rgba(15,23,42,.22); }
    .modal-header { position:sticky; top:0; z-index:2; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); padding: 20px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
    .modal-title { font-size:20px; font-weight:900; }
    .modal-body { padding: 22px 24px; }
    .modal-footer { position:sticky; bottom:0; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top:1px solid var(--line); padding: 16px 24px; display:flex; justify-content:flex-end; gap: 10px; }
    .form-section { border:1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 14px; background: rgba(248,250,252,.65); }
    .section-title { font-weight:900; margin-bottom: 12px; display:flex; align-items:center; gap:8px; }
    .form-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    label { font-size:13px; color:#475467; font-weight:700; }
    .textarea { resize: vertical; min-height: 84px; }
    .field-full { grid-column: 1 / -1; }
    .switch-line { flex-direction:row; align-items:center; gap:8px; padding-top:28px; }
    .detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .detail-item { padding: 12px; border:1px solid var(--line); border-radius: 14px; background:#fff; }
    .detail-label { color: var(--muted); font-size:12px; margin-bottom:6px; }
    .detail-value { font-weight:700; white-space: pre-wrap; word-break: break-word; }
    .toast { position:fixed; right:22px; bottom:22px; z-index:40; display:none; max-width: 360px; padding: 13px 15px; border-radius: 16px; background:#111827; color:#fff; box-shadow: var(--shadow); font-size:14px; }
    .toast.show { display:block; animation: pop .22s ease; }
    @keyframes pop { from { transform: translateY(10px); opacity:0; } to { transform: translateY(0); opacity:1; } }
    @media (max-width: 1120px) { .stats { grid-template-columns: repeat(3, minmax(0,1fr)); } .hero-inner { flex-direction:column; } .hero-tags { justify-content:flex-start; } }
    @media (max-width: 720px) { .app { width: min(100vw - 20px, 1480px); padding-top: 12px; } .hero { padding: 22px; border-radius: 24px; } .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .form-grid, .detail-grid { grid-template-columns: 1fr; } .search { min-width: 100%; } .toolbar, .filters { align-items:stretch; } .button-row, .btn, .select { width:100%; } .button-row .btn, .select { flex: 1 1 100%; } }
    @media print { .toolbar, .filters, .op, .footer-note, .hero-tags { display:none !important; } body { background:#fff; } .panel, .hero, .card { box-shadow:none; } }