/* ============================================================================ MIRA loading system — global styles (paired with mira-load.js). Page loader (logo) · top progress bar · skeletons · panel overlay · button spinner · determinate progress · empty/error states. All classes mira-*. Loaded once in _Layout . See design/loading-system.html for rationale. ============================================================================ */ :root{ --mlx-brand:#556ee6; --mlx-brand2:#7c5cff; --mlx-ink:#2a3042; --mlx-muted:#7a8095; --mlx-line:#e9ecf3; --mlx-sk1:#e9ecf3; --mlx-sk2:#f4f6fb; --mlx-danger:#f4556a; --mlx-off:#aab0c0; } @keyframes mlx-spin{to{transform:rotate(360deg)}} @keyframes mlx-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}} @keyframes mlx-indet{0%{left:-40%;width:40%}50%{left:30%;width:55%}100%{left:100%;width:40%}} @keyframes mlx-fade{from{opacity:0}to{opacity:1}} @keyframes mlx-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.965)}} @keyframes mlx-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ── page loader (logo) — shown by default, faded out smoothly when ready ── */ .mira-boot{position:fixed;inset:0;z-index:20000;background:radial-gradient(circle at 50% 38%,#ffffff 0%,#eef1f7 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .4s ease} .mira-boot.mira-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s} .mira-boot-logo{height:38px;width:auto;margin-bottom:24px;animation:mlx-breathe 2s ease-in-out infinite} .mira-boot-bar{position:relative;width:184px;height:4px;border-radius:4px;background:#e2e6f0;overflow:hidden} .mira-boot-bar > span{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--mlx-brand),var(--mlx-brand2));animation:mlx-indet 1.1s ease infinite} .mira-boot-t{font-size:14.5px;font-weight:600;color:var(--mlx-ink);margin-top:15px} .mira-boot-s{font-size:13px;color:var(--mlx-muted);margin-top:3px} /* ── top progress bar — background AJAX ── */ .mira-topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:10600;pointer-events:none;background:transparent} .mira-topbar-fill{position:absolute;top:0;left:0;height:100%;width:0;opacity:0;background:linear-gradient(90deg,var(--mlx-brand),var(--mlx-brand2));box-shadow:0 0 10px rgba(85,110,230,.6);border-radius:0 3px 3px 0;transition:width .2s ease,opacity .3s ease} /* ── skeletons ── */ .mira-sk{background:linear-gradient(90deg,var(--mlx-sk1) 25%,var(--mlx-sk2) 37%,var(--mlx-sk1) 63%);background-size:400% 100%;animation:mlx-shimmer 1.4s ease infinite;border-radius:7px;display:inline-block} .mira-sk-line{height:12px;width:100%} .mira-sk-sm{width:70px;height:10px} .mira-sk-ck{width:16px;height:16px;border-radius:5px;flex:none} .mira-sk-av{width:40px;height:40px;border-radius:11px;flex:none} .mira-sk-btn{height:32px;width:100%;border-radius:9px;margin-top:12px} .mira-sk-row{display:flex;align-items:center;gap:12px;padding:6px 2px} .mira-sk-card{border:1px solid var(--mlx-line);border-radius:14px;padding:15px;background:#fff} .mira-sk-kpi{border:1px solid var(--mlx-line);border-radius:14px;padding:14px 16px;background:#fff;display:flex;align-items:center;gap:12px} .mira-sk-kpi-x{display:flex;flex-direction:column;gap:7px;flex:1} .mira-sk-tr td{padding:9px 14px !important;border-bottom:1px solid var(--mlx-line)} /* ── panel overlay + ring ── */ .mira-ovl{position:absolute;inset:0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:11px;z-index:5;border-radius:inherit} .mira-ovl-t{font-size:14px;font-weight:600;color:var(--mlx-muted)} .mira-ring{width:34px;height:34px;border-radius:50%;border:3px solid #e4e8f2;border-top-color:var(--mlx-brand);animation:mlx-spin .7s linear infinite} .mira-ring.sm{width:18px;height:18px;border-width:2.5px} .mira-ring.lg{width:52px;height:52px;border-width:4px} /* ── button loading ── */ .mira-bspin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;display:inline-block;vertical-align:-2px;animation:mlx-spin .7s linear infinite} .mira-btn-loading{pointer-events:none} /* ── determinate progress ── */ .mira-pbar{height:9px;border-radius:6px;background:#eef0f6;overflow:hidden} .mira-pbar > span{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--mlx-brand),var(--mlx-brand2));transition:width .25s ease} /* ── empty / error states ── */ .mira-state{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:7px;padding:34px 20px;animation:mlx-pop .3s ease both} .mira-state-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px;margin-bottom:4px} .mira-state-ic.empty{background:#eef1f7;color:var(--mlx-off)} .mira-state-ic.err{background:#fdeef0;color:var(--mlx-danger)} .mira-state h5{font-size:16px;font-weight:600;margin:0} .mira-state p{margin:0;font-size:14px;color:var(--mlx-muted);max-width:280px} .mira-state-btn{margin-top:8px;border-radius:10px;padding:8px 15px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid var(--mlx-brand);background:var(--mlx-brand);color:#fff;display:inline-flex;align-items:center;gap:7px} .mira-state-btn:hover{filter:brightness(.96)}