/* Additions for the API-backed app: loading skeletons, offline/error states, busy buttons, login form. */
@keyframes skel { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skel { background: linear-gradient(90deg, #efefec 0%, #f7f7f5 50%, #efefec 100%); background-size: 600px 100%; animation: skel 1.2s linear infinite; border-radius: 10px; }
.skel-line { height: 14px; margin: 10px 0; }
.skel-title { height: 34px; width: min(420px, 70%); margin: 8px 0 14px; }
.skel-card { height: 260px; border-radius: 16px; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
main.busy { opacity: .6; transition: opacity .15s; pointer-events: none; }
.state-card { max-width: 520px; margin: 60px auto; text-align: center; padding: 34px 26px; }
.state-card h2 { font-size: 22px; margin-bottom: 8px; }
.state-card .ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--accent-soft); color: var(--accent); }
button[disabled], .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: #fff #fff transparent transparent; animation: spin .7s linear infinite; }
.btn-ghost.is-busy::after, .btn-plain.is-busy::after { border-color: #555 #555 transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-error { background: #fdecec; color: #b42318; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.offline-bar { background: #1d1d1f; color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.progress-note { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.s-suspended { background: #fdecec; color: #b42318; }
.s-active { background: #e8f6ee; color: #1a7f4b; }