*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fff;--fg:#000;--border:#ccc;--accent:#000;--on-accent:#fff;--hover:#333;--radius:2px}
body{font-family:"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh}
input,button{border:1px solid var(--border);padding:8px 12px;font:inherit;background:var(--bg);color:var(--fg);border-radius:var(--radius)}
input:focus,button:focus{outline:1px solid var(--accent);border-color:var(--accent)}
button{background:var(--accent);color:var(--on-accent);border-color:var(--accent);cursor:pointer}
button:hover{background:var(--hover)}

.login-page,.share-page{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box,.share-box{width:340px;border:1px solid var(--border);padding:32px 28px;border-radius:var(--radius)}
.login-box h1,.share-box h1{font-size:24px;text-align:center;margin-bottom:24px}
.login-box input,.share-box input{display:block;width:100%;margin-bottom:12px}
.login-box button,.share-box button{width:100%;padding:10px}
.captcha-row{display:flex;gap:8px;margin-bottom:12px}
.captcha-row input{flex:1;margin-bottom:0}
.captcha-row span{font:14px/36px monospace;color:var(--fg);white-space:nowrap}
#loginError,#shareError{color:red;font-size:13px;margin-top:8px;text-align:center;min-height:20px}

.dashboard-page{display:flex;flex-direction:column;min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid var(--border)}
header .logo{font-size:18px;font-weight:700}
main{flex:1;padding:24px;max-width:800px;margin:0 auto;width:100%}

.upload-zone{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.upload-zone #dropZone{border:2px dashed var(--border);padding:32px;text-align:center;cursor:pointer;flex:1;border-radius:var(--radius);transition:border-color .2s}
.upload-zone #dropZone.dragover{border-color:var(--accent)}
.upload-zone #dropZone span{font-size:14px;color:#666}
.upload-zone #dropZone input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload-btn{border:1px solid var(--border);padding:8px 16px;cursor:pointer;border-radius:var(--radius);display:inline-block}
.upload-btn:hover{background:#f5f5f5}
#uploadStatus{font-size:13px}

.file-list{border:1px solid var(--border);border-radius:var(--radius)}
.file-row{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);gap:12px}
.file-row:last-child{border-bottom:0}
.file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{font-size:12px;color:#666;min-width:70px;text-align:right}
.file-time{font-size:12px;color:#666;min-width:120px;text-align:right}
.file-actions{display:flex;gap:6px}
.file-actions button{font-size:12px;padding:4px 10px}
.empty{padding:32px;text-align:center;color:#999;font-size:14px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-content{background:var(--bg);border:1px solid var(--border);padding:24px;width:400px;border-radius:var(--radius)}
.modal-content p{margin-bottom:12px;font-size:14px}
.modal-content input{width:100%;margin-bottom:12px;font-size:13px}
.modal-content button{margin-right:8px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);padding:10px 24px;font-size:13px;border-radius:var(--radius);z-index:1000}
.toast[hidden]{display:none}

@media(max-width:480px){
  .login-box,.share-box{width:90%}
  .file-time{display:none}
  .modal-content{width:90%}
}