/* fx-dunia.css — Dunia Lo */
:root { --fx-accent: #7be3ff; --fx-ink: #eaf2ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07101f; color: var(--fx-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#fxStage { position: fixed; inset: 0; }
#fxStage canvas { display: block; width: 100%; height: 100%; }

.fx-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: min(680px, 92vw); display: flex; gap: 8px; z-index: 5; }
.fx-bar input { flex: 1; padding: 14px 16px; border-radius: 14px; border: 1px solid #2b3b5b;
  background: rgba(10,18,34,.82); color: var(--fx-ink); font-size: 16px; outline: none; }
.fx-bar input:focus { border-color: var(--fx-accent); }
.fx-btn { padding: 14px 18px; border-radius: 14px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 15px; background: var(--fx-accent); color: #04121d; }
.fx-btn.ghost { background: rgba(10,18,34,.82); color: var(--fx-ink); border: 1px solid #2b3b5b; }
.fx-btn[disabled] { opacity: .5; cursor: default; }

.fx-actions { position: fixed; right: 16px; top: 16px; display: flex; flex-direction: column;
  gap: 8px; z-index: 5; }

.fx-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(4,10,22,.6); z-index: 8; font-weight: 700; letter-spacing: .2px; }
.fx-overlay.show { display: flex; }
.fx-title { position: fixed; left: 16px; top: 16px; z-index: 5; max-width: 60vw;
  font-weight: 800; font-size: 18px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.fx-quota { position: fixed; left: 16px; top: 44px; z-index: 5; font-size: 12px; opacity: .8; }