.modal { max-width: 640px; margin: 40px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.timer { font-size: 12px; color: var(--muted); } .timer b { color: var(--accent-2); }
.buttons { display: grid; gap: 10px; }
.hubbtn { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-decoration: none; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.hubbtn:hover { border-color: var(--accent); }
.hubbtn .num { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: #0b0c10; font-weight: 800; display: grid; place-items: center; }
.hubbtn .lbl { font-weight: 700; } .hubbtn .sub { font-size: 12px; color: var(--muted); }
.hubbtn.tier .num { background: var(--accent-2); }
.hubbtn.locked { opacity: .45; pointer-events: none; }
.modal.minimized { display: none; }
.tray { position: fixed; left: 16px; bottom: 16px; }