/* 塗鴉世界 — 共用介面樣式
   七頁全部 link 呢一個檔;頁面專屬規則留在該頁 <style>。 */

:root{
  --bg1:#16294a;--bg2:#122a4a;--bg3:#0c2140;--bg4:#0a1a36;
  --glass:rgba(255,255,255,0.07);
  --glass2:rgba(255,255,255,0.13);
  --stroke:rgba(255,255,255,0.13);
  --stroke2:rgba(255,255,255,0.22);
  --txt:rgba(238,246,255,0.94);
  --txt-soft:rgba(218,234,254,0.62);
  --txt-faint:rgba(208,226,250,0.36);
  --mint:143,227,210;
  --lav:179,169,236;
  --ok:120,220,170;
  --warn:255,140,120;
  --ink:#0e2034;
  --grad:linear-gradient(135deg,rgb(var(--mint)),rgb(var(--lav)));
  --ease:cubic-bezier(.34,.12,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'PingFang TC','Microsoft JhengHei','Noto Sans TC',sans-serif;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
}
a{color:rgb(var(--mint));text-decoration:none;}
a:hover{color:rgb(var(--lav));}
button,input,textarea{font-family:inherit;}
:focus-visible{outline:2px solid rgb(var(--mint));outline-offset:2px;}
::selection{background:rgba(var(--mint),0.3);}

/* ── 背景:深藍漸層 + 兩顆柔光 ── */
.wa-bg{
  background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 40%,var(--bg3) 75%,var(--bg4) 100%);
  background-size:100% 200%;
  animation:wa-drift 18s ease-in-out infinite;
  min-height:100vh;
}
@keyframes wa-drift{0%,100%{background-position:50% 0%;}50%{background-position:50% 100%;}}
.orb{position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
.orb.a{width:300px;height:300px;background:rgba(var(--mint),0.32);top:-90px;left:-90px;animation:wa-orb 17s ease-in-out infinite;}
.orb.b{width:340px;height:340px;background:rgba(var(--lav),0.3);bottom:-120px;right:-110px;animation:wa-orb 22s ease-in-out infinite reverse;}
@keyframes wa-orb{0%,100%{transform:translate(0,0);}50%{transform:translate(36px,44px);}}
@media (prefers-reduced-motion:reduce){
  .wa-bg,.orb{animation:none;}
}

/* ── 圖示 ── */
.wa-ico{
  width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.wa-ico.s14{width:14px;height:14px;vertical-align:-2px;}
.wa-ico.s16{width:16px;height:16px;vertical-align:-3px;}
.wa-ico.s18{width:18px;height:18px;}
.wa-ico.s22{width:22px;height:22px;}
.wa-ico.s26{width:26px;height:26px;}
.wa-ico.s30{width:30px;height:30px;}
.wa-ico.s44{width:44px;height:44px;}

/* ── 品牌 ── */
.wa-mark{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:14px;background:var(--grad);color:var(--ink);flex:none;
}
.wa-mark.lg{width:56px;height:56px;border-radius:20px;}
.wa-brand-name{font-size:19px;font-weight:800;letter-spacing:1px;}

/* ── 按鈕 ── */
.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:14px;
  background:var(--glass2);border:1px solid var(--stroke);
  color:var(--txt-soft);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
.wa-btn:hover{background:rgba(255,255,255,0.2);color:var(--txt);}
.wa-btn:active{transform:translateY(1px);}
.wa-btn-primary{
  background:var(--grad);border:none;color:var(--ink);font-weight:800;
}
.wa-btn-primary:hover{filter:brightness(1.07);color:var(--ink);}
.wa-btn-lg{height:48px;padding:0 22px;border-radius:16px;font-size:15px;}
.wa-btn-block{width:100%;}
.wa-btn-danger{border-color:rgba(var(--warn),0.34);color:rgb(var(--warn));background:rgba(var(--warn),0.1);}
.wa-btn-danger:hover{background:rgba(var(--warn),0.2);color:#fff;}
.wa-btn-ok{border-color:rgba(var(--ok),0.5);color:rgb(var(--ok));background:rgba(var(--ok),0.18);}
.wa-btn-ok:hover{background:rgba(var(--ok),0.3);color:#fff;}
.wa-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:none;}
.wa-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border-radius:14px;
  background:var(--glass2);border:1px solid var(--stroke);color:var(--txt-soft);
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.wa-iconbtn:hover{background:rgba(255,255,255,0.2);color:var(--txt);}
.wa-iconbtn.sm{width:34px;height:34px;border-radius:12px;}
.wa-iconbtn.lg{width:48px;height:48px;border-radius:18px;}
.wa-iconbtn.danger{color:rgb(var(--warn));border-color:rgba(var(--warn),0.3);}
.wa-iconbtn.ok{color:rgb(var(--ok));border-color:rgba(var(--ok),0.5);background:rgba(var(--ok),0.18);}

/* ── 卡 / 條 ── */
.wa-card{
  background:var(--glass);border:1px solid var(--stroke);border-radius:22px;
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
}
.wa-bar{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  background:var(--glass);border:1px solid var(--stroke);border-radius:22px;
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
}
.wa-banner{
  display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:22px;
  background:rgba(var(--lav),0.18);border:1px solid rgba(var(--lav),0.42);
  color:var(--txt);font-size:14px;font-weight:700;
}
.wa-banner .wa-ico{color:rgb(var(--lav));}
.wa-label{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--txt-faint);
}
.wa-sep{height:1px;background:var(--stroke);border:0;margin:0;}

/* ── 標籤 / 狀態 ── */
.wa-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:11px;font-size:10.5px;font-weight:700;white-space:nowrap;
  background:var(--glass2);border:1px solid var(--stroke);color:var(--txt-soft);
}
.wa-chip.open{background:rgba(var(--ok),0.16);border-color:rgba(var(--ok),0.34);color:rgb(var(--ok));}
.wa-chip.closed{background:rgba(var(--warn),0.12);border-color:rgba(var(--warn),0.3);color:rgb(var(--warn));}
.wa-chip.review{background:rgba(var(--lav),0.24);border-color:rgba(var(--lav),0.5);color:var(--txt);}
.wa-chip.mint{background:rgba(var(--mint),0.16);border-color:rgba(var(--mint),0.36);color:var(--txt);}
.wa-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}

/* ── 房號 ── */
.wa-code{
  font-family:'Roboto Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-weight:800;letter-spacing:6px;color:var(--txt);
}

/* ── 開關 ── */
.wa-switch{
  position:relative;width:48px;height:28px;border-radius:999px;flex:none;
  background:rgba(255,255,255,0.14);border:0;cursor:pointer;padding:0;
  transition:background .25s var(--ease);
}
.wa-switch::after{
  content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,0.6);transition:transform .25s var(--ease),background .25s var(--ease);
}
.wa-switch[aria-checked="true"]{background:var(--grad);}
.wa-switch[aria-checked="true"]::after{transform:translateX(20px);background:#fff;}
.wa-row{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--stroke);font-size:13.5px;font-weight:600;color:var(--txt);
}
.wa-row:last-child{border-bottom:0;}
.wa-row .wa-ico{color:var(--txt-soft);}
.wa-row .grow{flex:1;}

/* ── 滑桿 ── */
.wa-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:rgba(255,255,255,0.14);outline:none;cursor:pointer;
}
.wa-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:0;box-shadow:0 2px 6px rgba(0,0,20,.4);cursor:pointer;
}
.wa-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;}

/* ── 輸入 ── */
.wa-input{
  width:100%;height:46px;padding:0 16px;border-radius:14px;
  background:rgba(255,255,255,0.06);border:1px solid var(--stroke);
  color:var(--txt);font-size:14.5px;outline:none;
  transition:border-color .25s var(--ease);
}
.wa-input::placeholder{color:var(--txt-faint);}
.wa-input:focus{border-color:rgba(var(--mint),0.6);}

/* ── 用量條 ── */
.wa-usage{display:flex;align-items:center;gap:9px;}
.wa-usage .track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,0.1);overflow:hidden;}
.wa-usage .fill{height:100%;border-radius:999px;background:var(--grad);transition:width .6s var(--ease);}
.wa-usage .fill.warn{background:linear-gradient(90deg,#ffcf8a,#ffb37a);}
.wa-usage .fill.danger{background:linear-gradient(90deg,#ffb37a,rgb(var(--warn)));}
.wa-usage .txt{font-size:10.5px;color:var(--txt-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ── 縮圖 ── */
.wa-thumb{
  border-radius:14px;background:rgba(255,255,255,0.06);object-fit:contain;flex:none;
}

/* ── 載入 / 空白 ── */
.wa-spinner{
  width:30px;height:30px;border:3px solid rgba(255,255,255,0.08);
  border-top-color:rgba(var(--mint),0.9);border-radius:50%;animation:wa-spin .8s linear infinite;
}
@keyframes wa-spin{to{transform:rotate(360deg);}}
.wa-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:70px 20px;text-align:center;color:var(--txt-soft);font-size:14px;line-height:1.75;
}
.wa-empty .wa-ico{color:var(--txt-faint);}

/* ── Modal ── */
.wa-modal-bg{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,12,26,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.wa-modal{
  width:min(400px,94vw);background:rgba(20,34,58,0.96);
  border:1px solid var(--stroke);border-radius:22px;padding:24px;
  box-shadow:0 18px 56px rgba(0,0,30,0.6);animation:wa-in .3s var(--ease);
}
@keyframes wa-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.wa-modal .m-ico{display:flex;justify-content:center;margin-bottom:12px;color:rgb(var(--mint));}
.wa-modal .m-ico.danger{color:rgb(var(--warn));}
.wa-modal .m-title{font-size:17px;font-weight:800;text-align:center;margin-bottom:9px;}
.wa-modal .m-msg{font-size:13px;color:var(--txt-soft);line-height:1.75;text-align:center;margin-bottom:17px;}
.wa-modal .m-actions{display:flex;gap:9px;}
.wa-modal .m-actions .wa-btn{flex:1;height:44px;font-size:13.5px;}

/* ── Toast ── */
.wa-toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(20,34,58,0.95);border:1px solid var(--stroke);
  padding:12px 22px;border-radius:16px;font-size:13px;color:var(--txt);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);
  z-index:70;box-shadow:0 10px 30px rgba(0,0,30,0.45);max-width:88vw;text-align:center;
}
.wa-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}