* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; color: #e2e8f0; font-family: sans-serif; padding: 2rem; }
.container { max-width: 1200px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; margin-bottom: 2rem; }
.status-badge { padding: 0.35rem 0.75rem; border-radius: 99px; font-weight: 600; }
.online { background: #065f46; color: #34d399; }
.connecting { background: #78350f; color: #fbbf24; }
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.card { background: #1e293b; padding: 1.5rem; border-radius: 12px; }
.transfer-item { background: #0f172a; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.progress-bar-bg { background: #334155; height: 8px; border-radius: 4px; margin-top: 10px; }
.progress-bar-fill { background: #38bdf8; height: 100%; transition: width 0.3s; }
.btn { background: #2563eb; color: white; border: none; padding: 0.75rem; border-radius: 8px; cursor: pointer; }

/* Modal / Viewport Styles */
.btn-secondary { background: #10b981; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.modal {
  display: none; position: fixed; z-index: 1000; left: 0; top: 0;
  width: 100%; height: 100%; background-color: rgba(0,0,0,0.85);
  align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.modal.show { display: flex; }

.modal-content {
  background: #1e293b; width: 90%; max-width: 1200px; height: 85vh;
  border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
  padding: 1rem 1.5rem; background: #0f172a; display: flex;
  justify-content: space-between; align-items: center; border-bottom: 1px solid #334155;
}

.btn-close {
  background: none; border: none; color: #94a3b8; font-size: 1.75rem; cursor: pointer;
}
.btn-close:hover { color: #f87171; }

#app-frame { width: 100%; height: 100%; background: #ffffff; }