:root { --bg:#0b1220; --card:#111a2e; --muted:#9fb0d0; --text:#e9f0ff; --accent:#6aa9ff; --border:#223055; }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;background:linear-gradient(180deg,#070b14 0%, #0b1220 40%, #070b14 100%);color:var(--text)}
    header{padding:18px 16px;position:sticky;top:0;background:rgba(7,11,20,.8);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
    header h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
    header .sub{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.5}
    main{max-width:1100px;margin:0 auto;padding:16px}
    .grid{display:grid;grid-template-columns: 1fr;gap:14px}
    @media(min-width:980px){.grid{grid-template-columns: 420px 1fr}}
    .card{background:rgba(17,26,46,.86);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    label{font-size:12px;color:var(--muted)}
    input[type="file"]{width:100%}
    input[type="range"]{width: 220px}
    input[type="number"], select{
      background:#0c1326;border:1px solid rgba(255,255,255,.12);color:var(--text);
      border-radius:10px;padding:8px 10px;outline:none
    }
    button{
      background:linear-gradient(180deg,#2b6cff 0%, #1b51d8 100%);
      border:0;color:white;border-radius:12px;padding:10px 12px;
      font-weight:700;cursor:pointer
    }
    button.secondary{
      background:#0c1326;border:1px solid rgba(255,255,255,.12);color:var(--text);font-weight:600
    }
    button:disabled{opacity:.55;cursor:not-allowed}
    .hint{font-size:12px;color:var(--muted);line-height:1.55;margin-top:8px}
    .kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    .pill{font-size:12px;color:var(--text);background:#0c1326;border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px}
    .list{display:grid;grid-template-columns:1fr;gap:12px}
    @media(min-width:900px){.list{grid-template-columns:1fr 1fr}}
    .item{border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;background:#0a1021}
    .item .meta{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:10px;align-items:center}
    .item .meta .title{font-size:12px;color:var(--muted)}
    .item canvas{display:block;width:100%;height:auto;background:#000}
    .progress{height:10px;background:#0c1326;border:1px solid rgba(255,255,255,.10);border-radius:999px;overflow:hidden}
    .bar{height:100%;width:0%;background:linear-gradient(90deg,#2b6cff,#9ad0ff)}
    .warn{color:#ffd18b;font-size:12px;line-height:1.5}
    .ok{color:#9bffbf;font-size:12px;line-height:1.5}
    .small{font-size:12px}
    a{color:var(--accent);text-decoration:none}