/*──────────────── Base & Page‑Container Hidden ─────────────────*/
html, body { margin:0; padding:0; height:100%; }
#app-container {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  display: none;
}

/*──────────────── Full‑Screen Loader ───────────────────────────*/
#loading {
  position: fixed; inset:0;
  background: #fff;
  display: flex; align-items:center; justify-content:center;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  z-index: 9999;
}
.loader {
  width: 30px; height:30px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23000" width="30" height="30" x="25" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite" begin="-.4"/></rect><rect fill="%23000" width="30" height="30" x="85" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite" begin="-.2"/></rect><rect fill="%23000" width="30" height="30" x="145" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite"/></rect></svg>');
}

/*──────────────── Per‑Container Loader & Fade ─────────────────*/
[octopus] {
  position: relative;
  min-height: 2em;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
[octopus].loading {
  opacity: 0; /* hide content while loading */
}
[octopus].loading::before {
  content: '';
  position: absolute;
  top:50%; left:50%;
  width:30px; height:30px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23000" width="30" height="30" x="25" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite" begin="-.4"/></rect><rect fill="%23000" width="30" height="30" x="85" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite" begin="-.2"/></rect><rect fill="%23000" width="30" height="30" x="145" y="85"><animate attributeName="opacity" dur="1.2" values="1;0;1" repeatCount="indefinite"/></rect></svg>');
  transform: translate(-50%, -50%);
}

/*──────────────── Minimal Defaults ──────────────────────────────*/
header, div, footer { /* no extra styling */ }