* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; -webkit-tap-highlight-color: transparent; }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* Toast */
.toast {
    position: fixed; top: 50px; left: 50%; transform: translateX(-50%);
    padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 500;
    z-index: 9999; opacity: 0; transition: opacity 0.3s;
    max-width: calc(100% - 48px); text-align: center; pointer-events: none;
}
.toast.show { opacity: 1; }
.toast-success { background: rgba(46,196,182,0.95); color: #fff; }
.toast-error   { background: rgba(239,68,68,0.95);  color: #fff; }

/* Loading spinner */
.loading-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: spin 0.6s linear infinite;
    display: inline-block; vertical-align: middle; margin-right: 6px;
}

/* Buttons */
.btn {
    width: 100%; padding: 14px; border-radius: 10px; border: none;
    font-size: 16px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: linear-gradient(135deg, #4D8EFF, #3D7FFF); color: #fff;
    box-shadow: 0 4px 16px rgba(61,127,255,0.35); margin-top: 6px;
}
.btn-secondary { background: #F3F4F6; color: #4B5563; margin-top: 10px; }
.btn-disabled  { opacity: 0.5; pointer-events: none; }