*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;background:linear-gradient(180deg,#eef3ff 0%,#f7f9ff 100%);color:#26334d}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(90deg,#1e3a8a,#3b82f6);color:#fff;box-shadow:0 8px 24px rgba(30,58,138,.25)}
.brand{font-weight:700;letter-spacing:.5px}
.receive{display:flex;gap:10px}
.receive input{padding:10px 12px;border-radius:10px;border:0;background:rgba(255,255,255,.95);width:220px}
.receive button{padding:10px 14px;border:0;border-radius:10px;background:#fff;color:#1e3a8a;font-weight:700}
.container{display:flex;gap:18px;padding:18px;max-width:1200px;margin:0 auto}
.panel{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid #e1e7ff;border-radius:14px;padding:14px;flex:1;box-shadow:0 10px 30px rgba(59,130,246,.15)}
.panel.side{max-width:360px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:8px 12px;border:0;border-radius:10px;background:#e7effa;color:#2b5db9;font-weight:600}
.tab.active{background:#3b82f6;color:#fff}
.tab-content.hidden{display:none}
.dropzone{border:2px dashed #b7c6e6;border-radius:14px;padding:32px;text-align:center;color:#2b3d66;background:linear-gradient(180deg,#f9fbff,#f1f6ff);transition:.2s}
.dropzone:hover{border-color:#3b82f6;background:#eef3ff}
.actions{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap}
.btn{padding:10px 14px;border:0;border-radius:10px;background:#3b82f6;color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(59,130,246,.25)}
.btn.secondary{background:#e7effa;color:#2b5db9}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e2e6f0;border-radius:12px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.card .icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#1e3a8a,#3b82f6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.card .meta{flex:1}
.card .name{font-weight:700;color:#1e2a4a}
.card .size{color:#6f7ea5;font-size:12px;margin-top:2px}
.card .ops{display:flex;gap:8px}
.code-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}
.code{font-size:28px;font-weight:800;color:#1e3a8a}
.footer{padding:14px;text-align:center;color:#6f7ea5}
textarea{width:100%;padding:10px;border:1px solid #e2e6f0;border-radius:10px}
.progress{height:6px;background:#eaf0ff;border-radius:999px;overflow:hidden;margin-top:6px}
.progress>span{display:block;height:100%;background:#3b82f6;width:0%}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1e3a8a;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(30,58,138,.25);opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1}
@media (max-width: 768px){
  .container{flex-direction:column}
  .panel.side{max-width:100%}
  .receive input{width:160px}
  .dropzone{padding:24px}
  .actions{flex-wrap:wrap}
}