/* 艾樂雅集點卡：入口、客戶後台、廠商後台共用的卡片系統。淡天藍紙面上放白色厚卡，天藍是品牌墨、粉紅只當印章、橘色只給「現在」。 */
:root{
  --sky:#65bdeb;          /* 品牌天藍（logo）：頁首帶、卡頭色帶、框線 */
  --sky-200:#bfe3f5;      /* 格線、撕線 */
  --sky-100:#dff1fa;      /* 分頁底、focus 光暈 */
  --sky-50:#eef7fc;       /* 紙面（頁面底色）與輔助區底 */
  --ink-blue:#17465f;     /* 深藍：標題、欄位名、連結 */
  --ink-blue-deep:#0f3447;/* 深藍 hover、天藍色面上的文字 */
  --band-ink:#0f3447;     /* 天藍色面上的文字（≥4.5:1） */
  --ink:#243b4a;          /* 內文 */
  --muted:#4f6877;        /* 次要文字（藍灰，非中性灰） */
  --rule:#d7ebf5;         /* 1px 列分隔線 */
  --rule-strong:#9fd3ee;  /* 2px 元件框線 */
  --num-idle:#45728c;     /* 還沒蓋章的格子數字（大字 ≥3:1） */
  --pink:#ed7eab;         /* 印章墨：蓋章、署名、「已填」 */
  --pink-ink:#a93a6f;     /* 粉紅系文字（≥4.5:1） */
  --pink-50:#fdeef4;
  --orange:#ee7d5a;       /* 現在：目前這一格、主按鈕、製作中 */
  --orange-deep:#d65f3b;  /* 主按鈕底邊 */
  --orange-hover:#f08a68; /* 主按鈕 hover：變亮而不是變深，深藍字才保持 ≥4.5:1 */
  --orange-ink:#a8431f;   /* 橘系文字（≥4.5:1） */
  --orange-50:#fdeee7;
  --paper:#ffffff;        /* 卡片 */
  --page:#eef7fc;         /* 紙面 */
  --alert:#b3261e;
  --alert-50:#fcefee;
  --alert-rule:#e3b3af;
  --alert-deep:#8c1d16;   /* 錄音中按鈕的底邊 */
  --ok-50:#e9f5f1;
  --ok:#1d6b52;
  --ok-rule:#9fcfbd;
  --warn:#7a5200;         /* 提醒黃 */
  --warn-50:#fff7e0;
  --warn-rule:#e8cf8a;
  --screen:#0c1a20;       /* 影片畫面底色 */
  --radius:14px;          /* 卡片 */
  --radius-sm:12px;       /* 欄位、收合列、通知 */
  --pill:999px;           /* 按鈕、晶片、印章 */
  --shadow:0 2px 10px rgba(23,70,95,.08);   /* 厚卡離開紙面一點點 */
  --shadow-up:0 -2px 12px rgba(23,70,95,.1);
  --shadow-modal:0 8px 20px rgba(15,52,71,.22);   /* 視窗：只靠陰影分層，不加框 */
  --scrim:rgba(15,52,71,.45);        /* 視窗底下的遮罩 */
  --overlay:rgba(15,52,71,.9);       /* 疊在照片上的小按鈕底色 */
  --overlay-soft:rgba(15,52,71,.85);
  --font:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --font-ui:"Huninn","Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --num:"Fredoka","Huninn","Noto Sans TC",sans-serif;
  --mark:url("/brand/aileva-mark.png");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");        /* 勾勾：給 mask 用（黑） */
  --play-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); /* 小縮圖右下角的播放標 */
  --check-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a6f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); /* 勾勾：給「完成」章的底圖用（粉紅墨） */
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule-strong) var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.6 var(--font);caret-color:var(--orange-deep)}
::selection{background:var(--sky-100);color:var(--ink-blue)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--page)}::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:var(--pill);border:2px solid var(--page)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink-blue);text-underline-offset:3px;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--ink-blue)}
h1,h2,h3{color:var(--ink-blue);line-height:1.3;text-wrap:balance;margin:0;font-family:var(--font-ui);font-weight:400}
.num-face{font-family:var(--num);font-variant-numeric:tabular-nums}
table,.tabular{font-variant-numeric:tabular-nums}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 品牌色帶與 logo 牌 */
.band{background:var(--sky);color:var(--band-ink)}
.logo-plate{display:inline-flex;align-items:center;background:var(--paper);border-radius:var(--pill);padding:6px 14px}
.logo-plate img{display:block;height:36px;width:auto}

/* 按鈕：膠囊。主按鈕是橘色實體鍵，深藍字、底邊厚一點 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:2px solid var(--rule-strong);border-radius:var(--pill);background:var(--paper);color:var(--ink-blue);font-family:var(--font-ui);font-size:17px;cursor:pointer;text-decoration:none;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out,transform .15s ease-out}
.btn:hover{background:var(--sky-50);border-color:var(--sky)}
.btn.primary{background:var(--orange);border-color:var(--orange);border-bottom-color:var(--orange-deep);border-bottom-width:4px;padding-top:9px;color:var(--ink-blue-deep)}
.btn.primary:hover{background:var(--orange-hover);border-color:var(--orange-hover);border-bottom-color:var(--orange-deep)}
.btn.primary:active{transform:translateY(2px);border-bottom-width:2px;padding-bottom:12px}
.btn.soft{border-color:var(--sky-200);background:var(--sky-50)}
.btn.danger{border-color:var(--alert-rule);color:var(--alert);background:var(--paper)}
.btn.danger:hover{background:var(--alert-50);border-color:var(--alert)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.is-busy,.btn.is-busy:disabled{opacity:1;cursor:progress}
.btn.is-busy::before{content:"";flex:none;width:16px;height:16px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* 危險按鈕獨立在列尾，與其他按鈕隔開 */
.actions .btn.danger{margin-left:auto}
.actions .btn.danger:only-child{margin-left:0}

/* 表單欄位 */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-ui);color:var(--ink-blue);margin-bottom:6px}
.field input:not([type=checkbox]):not([type=file]):not([type=color]),.field select,.field textarea,select,textarea{width:100%;min-height:52px;padding:10px 16px;border:2px solid var(--rule-strong);border-radius:var(--radius-sm);background-color:var(--paper);font-size:17px;transition:border-color .15s ease-out,box-shadow .15s ease-out}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317465f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.field textarea,textarea{min-height:110px;line-height:1.7;resize:vertical}
.field input:focus,.field select:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-100)}
.field input[type=file]{width:100%;padding:10px 12px;border:2px dashed var(--rule-strong);border-radius:var(--radius-sm);background:var(--sky-50)}
input[type=file]::file-selector-button{font:inherit;font-family:var(--font-ui);min-height:40px;padding:6px 16px;margin-right:12px;border:2px solid var(--rule-strong);border-radius:var(--pill);background:var(--paper);color:var(--ink-blue);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--sky-50);border-color:var(--sky)}
.field input[type=color]{width:100%;height:52px;border:2px solid var(--rule-strong);border-radius:var(--radius-sm);padding:4px;background:var(--paper)}
.check[hidden]{display:none!important}
.check{display:flex!important;gap:10px;align-items:flex-start;font-family:var(--font);font-weight:500!important;line-height:1.55;cursor:pointer;color:var(--ink)}
.check input{width:22px;height:22px;margin-top:2px;flex:none}
.help{color:var(--muted);font-size:16px;line-height:1.6;margin-top:6px}
.muted{color:var(--muted);font-size:16px;line-height:1.65}

/* 狀態標籤：小印章 */
.tag{display:inline-block;padding:2px 11px;border:1.5px solid currentColor;border-radius:var(--pill);font-family:var(--font-ui);font-size:16px;line-height:1.5;vertical-align:2px;color:var(--muted);background:var(--paper)}
.tag.on{color:var(--pink-ink);background:var(--pink-50);border-color:var(--pink)}
.tag.work{color:var(--ink-blue);border-style:dashed}
.tag.fail,.tag.off{color:var(--alert);background:var(--alert-50)}

/* 通知列 */
.notice{display:none;padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:16px;white-space:pre-wrap;border:2px solid;box-shadow:var(--shadow)}
.notice.show{display:block}
.notice.ok{background:var(--ok-50);color:var(--ok);border-color:var(--ok-rule)}
.notice.err{background:var(--alert-50);color:var(--alert);border-color:var(--alert-rule)}
.notice.warn{background:var(--warn-50);color:var(--warn);border-color:var(--warn-rule)}

.empty{padding:28px 16px;text-align:center;color:var(--muted)}

/* 登入：一張卡 */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.loginbox{width:min(440px,100%);background:var(--paper);border:1.5px solid var(--sky);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.loginbox .band{padding:18px 24px;display:flex;align-items:center;gap:14px}
.loginbox .band h1{font-size:20px}
.loginbox .sheet{padding:24px 24px 28px;border:0;box-shadow:none;border-radius:0}
.loginbox .sheet h2{font-size:26px;margin-bottom:18px}
.loginbox .btn.primary{width:100%;min-height:56px;font-size:18px}

/* 頁尾：卡片外的一行，左邊小天使（集點卡沒有頁碼） */
.folio{display:flex;align-items:center;gap:12px;margin-top:24px;padding:4px 6px 0;color:var(--muted);font-size:16px}
.folio span::before{content:"";display:inline-block;width:22px;height:18px;margin-right:8px;vertical-align:-3px;background:var(--mark) center/contain no-repeat}
/* 卡片單元：白色厚卡，卡頭下面一條撕線 */
.sheet{background:var(--paper);border:1.5px solid var(--sky-200);border-radius:var(--radius);padding:0 18px 18px;box-shadow:var(--shadow)}
.sheet-head{padding:18px 0 14px;margin-bottom:14px;border-bottom:2px dashed var(--sky-200)}
.sheet-head h2{font-size:24px}
.sheet-head p{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.65}
.sheet + .sheet{margin-top:24px}
.cut{border:0;border-top:2px dashed var(--sky-200);margin:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}