*{box-sizing:border-box}html,body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111}
body.login-body{background:#f6f7f9;display:flex;min-height:100vh;align-items:center;justify-content:center}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 10px 24px rgba(0,0,0,.06);}
.login-card{width:360px;max-width:90vw}
.form{display:grid;gap:10px}
.form input[type=text],.form input[type=password],.form input[type=file],.form input[type=url]{padding:10px;border:1px solid #e5e7eb;border-radius:10px;width:100%}
.form button{padding:10px 14px;border:0;background:#111;color:#fff;border-radius:10px;cursor:pointer}
.alert{background:#fee2e2;color:#991b1b;padding:8px 12px;border-radius:10px;margin-bottom:10px}
.muted{color:#6b7280;font-size:12px}
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;z-index:10}
.topbar .brand{font-weight:700}
.topbar .link{color:#111;text-decoration:none;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px}
.container{max-width:1060px;margin:20px auto;padding:0 16px;display:grid;gap:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.item{border:1px solid #eee;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.thumb-wrap{aspect-ratio:1.4/1;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.thumb{max-width:100%;max-height:100%}
.meta{padding:12px;display:grid;gap:8px}
.meta .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row .url{flex:1;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px}
.row .copy,.open,.download-qr{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;text-decoration:none;color:#111}
.qrcode{margin-top:8px;display:flex;align-items:center;justify-content:center}