/* 樣式層順序。與 resources/views/app.blade.php 的那份必須逐字一致——
   兩處都要有：blade 那份是主要來源，這份是保險。
   瀏覽器以「第一次看到的順序」為準，只要 <!DOCTYPE> 之前多出任何輸出
   （PHP notice、BOM、<?php 前的空白），瀏覽器就會提早結束 <head>、
   把 blade 那個 inline <style> 重新歸到 <body>，順序宣告便排到所有樣式之後而失效，
   app 層會變成最弱的一層、整站覆寫全部輸掉。
   這支檔案是 <link>、不經打包，正常情況下它是第一份被解析的樣式，順序由它定下。
   但它擋不住上述故障：head 被搬到 body 時，Vite 在執行期動態插進 document.head 的
   頁面 chunk CSS 會排在所有被搬走的 <link> 之前，由它先定義層順序。
   真正的防線是「<!DOCTYPE> 之前不能有任何輸出」——正式機 display_errors 關掉，
   部署後用 curl 確認回應第一行就是 <!DOCTYPE html>。 */
@layer properties, theme, base, components, utilities;
@layer vuetify-core { @layer reset, base; }
@layer vendor;
@layer vuetify-components;
@layer vuetify-overrides;
@layer app;
@layer vuetify-utilities { @layer theme-base, typography, helpers, theme-background, theme-foreground; }
@layer vuetify-final { @layer transitions, trumps; }

body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  gap: 1rem 0;
  inline-size: 100%;
}

.loading {
  position: relative;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: 50%;
  block-size: 55px;
  inline-size: 55px;
}

.loading .effect-1,
.loading .effect-2,
.loading .effect-3 {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-radius: 50%;
  block-size: 100%;
  border-inline-start: 3px solid var(--initial-loader-color, #eee);
  inline-size: 100%;
}

.loading .effect-1 {
  animation: rotate 1s ease infinite;
}

.loading .effect-2 {
  animation: rotate-opacity 1s ease infinite 0.1s;
}

.loading .effect-3 {
  animation: rotate-opacity 1s ease infinite 0.2s;
}

.loading .effects {
  transition: all 0.3s ease;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

@keyframes rotate-opacity {
  0% {
    opacity: 0.1;
    transform: rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: rotate(1turn);
  }
}