* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; }
.wrap { max-width: 1400px; margin: 20px auto; padding: 0 12px; }
h1 { margin: 0 0 16px; }
.grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.card { background: #111827; border: 1px solid #334155; border-radius: 10px; padding: 12px; }
label { display: block; margin: 10px 0 6px; color: #cbd5e1; }
input, select, textarea, button { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #475569; background: #0b1220; color: #e2e8f0; }
textarea { resize: vertical; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
button { cursor: pointer; background: #1d4ed8; border: none; }
button:hover { background: #2563eb; }
button.danger { background: #b91c1c; }
.status { min-height: 38px; padding: 8px; border: 1px solid #334155; border-radius: 6px; background: #020617; font-size: 12px; word-break: break-all; }
.login-buttons { margin-top: 10px; }
a { color: #60a5fa; }
#preview { width: 100%; max-height: 220px; object-fit: contain; border: 1px solid #334155; border-radius: 8px; background: #020617; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { border: 1px solid #334155; padding: 6px; vertical-align: top; }
th { background: #1e293b; }
#logs { background: #020617; border: 1px solid #334155; border-radius: 8px; height: 220px; overflow: auto; padding: 10px; white-space: pre-wrap; }
.progress-wrap { width: 100%; height: 18px; border: 1px solid #334155; border-radius: 20px; overflow: hidden; background: #020617; }
#progress_bar { width: 0%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }