*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#111}header{background:linear-gradient(135deg,#1f7aef,#0e4fb8);color:#fff;padding:24px 30px;display:flex;justify-content:space-between;align-items:center}header h1{margin:0 0 5px;font-size:28px}header p{margin:0}.logout{color:#fff;text-decoration:none;background:rgba(255,255,255,.18);padding:12px 16px;border-radius:8px}main{max-width:1080px;margin:24px auto;padding:0 14px}.card{background:#fff;border-radius:14px;padding:22px;margin-bottom:20px;box-shadow:0 6px 24px rgba(0,0,0,.08)}.card h2{margin-top:0}.drop-zone{border:2px dashed #1f7aef;background:#f7fbff;border-radius:14px;padding:36px;text-align:center;cursor:pointer;position:relative}.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.drop-zone strong{display:block;font-size:22px;margin-bottom:8px}.drop-zone span,.hint,.note,.sub{color:#555}.drop-zone.dragover{background:#e8f2ff}.btn{margin-top:16px;width:100%;border:none;background:#1f7aef;color:#fff;padding:14px 18px;border-radius:9px;font-size:17px;cursor:pointer}.btn:hover{background:#145fc2}.alert{padding:14px 16px;border-radius:9px;margin-bottom:18px}.alert.success{background:#e7f8ed;color:#117a34}.alert.error{background:#fdeaea;color:#b00020}.alert.warning{background:#fff8df;color:#8a6500}.file-list{margin-top:14px;font-size:14px}.file-item{background:#f2f5f8;padding:8px 10px;border-radius:8px;margin-bottom:6px}.grid{width:100%;border-collapse:collapse}.grid th,.grid td{padding:11px 10px;border-bottom:1px solid #eee;text-align:left}.grid th{background:#f5f7fa}.login-page{min-height:100vh;display:flex;justify-content:center;align-items:center}.login-box{width:100%;max-width:420px;background:#fff;padding:28px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.12)}.login-box h1{margin-bottom:6px}label{display:block;margin-top:14px;margin-bottom:6px;font-weight:bold}input[type=text],input[type=password]{width:100%;padding:13px;border:1px solid #ddd;border-radius:9px;font-size:16px}@media(max-width:600px){header{display:block}.logout{display:inline-block;margin-top:14px}.drop-zone{padding:26px 12px}.grid{font-size:13px}}
.uploading-box{
    margin-top:15px;
    font-weight:bold;
    color:#0e4fb8;
}

.fake-progress{
    width:100%;
    height:26px;
    background:#ddd;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
}

.fake-progress-bar{
    height:100%;
    width:40%;
    background:#2d7ff9;
    animation: loadingMove 1.2s infinite linear;
}

@keyframes loadingMove{
    0%{margin-left:-40%;}
    100%{margin-left:100%;}
}
.login-box h1{
    text-align:center;
    font-size:42px;
    margin-bottom:12px;
    color:#993300;
    font-weight:700;
}

.sub{
    text-align:center;
    color:#cc3300;
    font-size:17px;
    margin-bottom:30px;
}

label{
    display:block;
    margin-top:18px;
    margin-bottom:8px;
    font-size:18px;
    font-weight:bold;
}

input[type=text],
input[type=password]{
    width:100%;
    padding:14px;
    border:1px solid #dcdcdc;
    border-radius:10px;
    font-size:16px;
    box-sizing:border-box;
}

.btn{
    width:100%;
    margin-top:28px;
    padding:15px;
    border:none;
    border-radius:10px;
    background:#2d7ff9;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
}

.btn:hover{
    background:#1565d8;
}