/* Loading and account states share the same solid panels and controls. */
.loading,.page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:220px;padding:36px 20px;border:1px solid var(--panel-line);border-radius:var(--panel-radius);background:var(--white);color:var(--muted);font-size:14px;text-align:center;box-shadow:var(--shadow)}
.spinner{display:inline-block;width:20px;height:20px;flex-shrink:0;border:2px solid var(--control-border);border-top-color:var(--blue-dark);border-radius:50%;animation:app-loading-spin .8s linear infinite}
.loading>.spinner,.page-loading>.spinner{width:32px;height:32px;border-width:3px}
.state-panel{padding:24px 20px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius);box-shadow:var(--shadow);overflow-wrap:anywhere}
.state-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border:0;border-radius:var(--panel-radius);background:var(--primary-gradient);color:var(--white);box-shadow:var(--shadow)}
.state-icon.waiting{background:var(--secondary-gradient)}.state-icon .ui-icon{width:28px;height:28px}
.state-panel .intro{color:var(--slate-text)}
.is-loading{display:flex;align-items:center;justify-content:center;gap:10px}
.is-loading:disabled,.primary-button.is-loading:disabled{background:var(--primary-gradient);color:var(--white);border:0;opacity:1}
.is-loading .spinner,.home-card.is-opening .spinner,.preview-start.is-opening .spinner{border-color:var(--white);border-top-color:var(--pink-dark)}
.home-card.revision.is-opening .spinner,.level-card.level-n4.is-opening .spinner,.level-card.level-n2.is-opening .spinner{border-top-color:var(--blue-dark)}
#notice{padding:14px 16px;border:1px solid var(--panel-line);border-radius:var(--panel-radius);background:var(--white);color:var(--slate-text);font-size:13px;font-weight:400;box-shadow:var(--shadow)}
#notice button{border:1px solid var(--control-border);border-radius:var(--button-radius);background:var(--surface);color:var(--ink)}
@keyframes app-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-style:dashed}}
@media(max-width:350px){.state-panel{padding:20px 16px}}