* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, Segoe UI, Roboto, sans-serif; background: #121018; color: #e8e4f0; padding: 20px 24px 28px; min-height: 100vh; } header h1 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 600; } .sub { margin: 0 0 18px; color: #9a92b0; font-size: 0.9rem; } .card { background: #1c1828; border: 1px solid #2e2840; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .lbl { display: block; font-size: 0.8rem; color: #b8b0d0; margin-bottom: 8px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row.stack { flex-direction: column; align-items: stretch; } #gameDir { flex: 1; min-width: 200px; padding: 10px 12px; border-radius: 8px; border: 1px solid #3d3558; background: #0e0c14; color: #f0ecff; font-size: 0.85rem; } input[type='text'], input[type='password'] { padding: 10px 12px; border-radius: 8px; border: 1px solid #3d3558; background: #0e0c14; color: #f0ecff; font-size: 0.9rem; } button { padding: 10px 16px; border-radius: 8px; border: 1px solid #4a4268; background: #2a243c; color: #e8e4f0; cursor: pointer; font-size: 0.88rem; } button:hover:not(:disabled) { background: #352d4c; } button:disabled { opacity: 0.45; cursor: not-allowed; } button.primary { background: #4c3d8a; border-color: #5c4d9a; } button.primary:hover:not(:disabled) { background: #5a4a9e; } button.success { background: #1d6b45; border-color: #2a8a5a; margin-top: 10px; } button.success:hover:not(:disabled) { background: #258055; } button.ghost { background: transparent; border-color: #4a4268; color: #b0a8d0; font-size: 0.82rem; } button.ghost:hover:not(:disabled) { background: #241f34; } .row-actions { padding: 10px 16px; } button.wide { width: 100%; } .log { margin: 12px 0 0; padding: 12px; background: #0a090e; border-radius: 8px; border: 1px solid #2a2438; min-height: 120px; max-height: 200px; overflow: auto; font-size: 0.78rem; color: #c4bdd8; white-space: pre-wrap; word-break: break-word; } .hidden { display: none !important; }