/* 延遲通 網站共用樣式：懷舊視窗風 */
:root{
  --sky1:#2a0f4a; --sky2:#5b2a8c; --sky3:#8d4fb8;
  --t1:#E07AA8; --t2:#C2457F; --t3:#8A1F55;
  --menu:#ECE7D8; --body:#FFFDF6; --line:#7a5a9a;
  --ink:#2a1840; --muted:#6e6680; --link:#5a1f99;
  --bevel-hi:#ffffff; --bevel-lo:#9a8fae;
}
*{box-sizing:border-box}
html{background:var(--sky1)}
body{
  margin:0; color:var(--ink);
  font:16px/1.75 -apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 9%,#fff9 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 34%,#ffe9 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 46%,#fff7 50%,transparent 51%),
    radial-gradient(2px 2px at 6% 72%,#fff8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 64%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 82%,#fff8 50%,transparent 51%),
    linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:var(--link)}

/* 上方工作列 */
.topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 16px; background:linear-gradient(#efe9f7,#cfc4e0);
  border-bottom:2px solid #3b1a5e; box-shadow:0 2px 0 #ffffff55 inset;
}
.topbar .brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:#2a1048; font-weight:800; font-size:18px}
.topbar .brand img{width:30px; height:30px; border-radius:7px; border:1px solid #3b1a5e}
.topbar nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.topbar nav a{
  font-size:14px; text-decoration:none; color:#2a1048; padding:2px 10px;
  background:var(--menu); border:1px solid; border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
.topbar nav a:active{border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo)}

main{max-width:820px; margin:0 auto; padding:22px 16px 40px}

/* 懷舊視窗 */
.win{
  background:var(--body); border:2px solid #4a1d6e; border-radius:8px 8px 3px 3px;
  box-shadow:4px 4px 0 rgba(20,0,40,.45); margin:0 0 22px; overflow:hidden;
}
.win-title{
  display:flex; align-items:center; gap:8px; padding:5px 6px 5px 10px;
  background:linear-gradient(180deg,var(--t1) 0%,var(--t2) 55%,var(--t3) 100%);
  color:#fff; font-weight:700; font-size:15px; text-shadow:1px 1px 0 #5a0f35;
}
.win-title img{width:18px; height:18px; border-radius:4px}
.win-title .ctl{margin-left:auto; display:flex; gap:4px}
.win-title .ctl i{
  display:inline-grid; place-items:center; width:20px; height:18px; font-style:normal; font-size:11px; line-height:1;
  color:#fff; background:linear-gradient(#f3a9c8,#c2457f); border:1px solid #fff9; border-radius:3px; text-shadow:none;
}
.win-title .ctl i.x{background:linear-gradient(#f08a7a,#c0392b)}
.win-menu{background:var(--menu); border-bottom:1px solid #c9c0a8; padding:2px 10px; font-size:13px; color:#3a2a50}
.win-menu span{margin-right:14px}
.win-body{padding:18px 20px}
.win-status{background:var(--menu); border-top:1px solid #c9c0a8; padding:3px 10px; font-size:12px; color:#4a3a60; display:flex; gap:12px; flex-wrap:wrap}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:#3cc464; border:1px solid #1d7a3a; margin-right:5px; vertical-align:middle}

h1{font-size:23px; margin:0 0 6px; color:#4a1478}
h2{font-size:17px; margin:22px 0 6px; color:#3a1060}
p{margin:4px 0}
.muted{color:var(--muted); font-size:14px}

/* 首頁 */
.hero{display:block; width:100%; height:auto; border-bottom:2px solid #4a1d6e}
.tagline{font-size:20px; font-weight:800; color:#4a1478; margin:4px 0 2px}
.btn{
  display:inline-block; margin-top:14px; padding:9px 22px; font-weight:800; font-size:16px; color:#2a1048; text-decoration:none;
  background:linear-gradient(#fffef8,#e4dccb); border:2px solid; border-color:var(--bevel-hi) #6b5d82 #6b5d82 var(--bevel-hi);
  outline:1px solid #3b1a5e;
}
.btn:active{border-color:#6b5d82 var(--bevel-hi) var(--bevel-hi) #6b5d82}
.feat{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.feat li{background:#fff; border:1px solid #d8cde6; border-left:5px solid var(--t2); padding:8px 12px}
.feat b{display:block; color:#4a1478}
.feat span{font-size:14px; color:var(--muted)}
.shots{display:flex; gap:14px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x mandatory}
.shots img{flex:0 0 auto; width:200px; height:auto; border:2px solid #4a1d6e; scroll-snap-align:start; background:#eee}
.notice{background:#fff6d6; border:1px dashed #c9a640; padding:8px 12px; font-size:14px}

footer{max-width:820px; margin:0 auto; padding:0 16px 32px; color:#e9dcf7; font-size:13px; text-align:center}
footer a{color:#fff}

@media (max-width:520px){
  .win-body{padding:14px 14px}
  .shots img{width:160px}
  .topbar nav{margin-left:0}
}
@media (min-width:700px){
  .shots{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; overflow:visible; max-width:640px; margin:0 auto}
  .shots img{width:100%}
}
.user{font-size:26px; font-weight:800; color:#4a1478; background:#fff; border:1px solid #d8cde6; padding:6px 12px; margin:8px 0 4px; word-break:break-all}
.topbar nav a.home{font-weight:800; color:#fff; background:linear-gradient(#8a5cc9,#5b2a8c); border-color:#c9b3ea #2e1150 #2e1150 #c9b3ea}
/* 下載按鈕 */
.dl{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px}
.dl a,.dl span.dl-android{display:inline-flex; flex-direction:column; justify-content:center; min-width:230px; padding:12px 26px; text-decoration:none; border-radius:10px; line-height:1.3}
.dl-ios{color:#fff; background:linear-gradient(#6fdc6f 0%,#36a836 50%,#1f7d1f 100%); border:2px solid #155e15; box-shadow:0 4px 0 #0f4a0f, 0 6px 14px rgba(0,0,0,.25); text-shadow:1px 1px 0 #0f4a0f}
.dl-ios:hover{filter:brightness(1.08)}
.dl-ios:active{transform:translateY(3px); box-shadow:0 1px 0 #0f4a0f}
.dl-android{color:#5a4a20; background:repeating-linear-gradient(45deg,#fff3c4 0 10px,#ffe9a0 10px 20px); border:2px dashed #c9a640; cursor:default}
.dl-small{font-size:13px; font-weight:700; opacity:.9}
.dl-big{font-size:22px; font-weight:900}
@media (max-width:520px){ .dl a,.dl span.dl-android{min-width:0; flex:1 1 100%} }

/* Android 搶先測試（11/9） */
a.dl-android{cursor:pointer}
a.dl-android:hover{filter:brightness(1.04)}
.dl-test{color:#fff; background:linear-gradient(#7fb8ff 0%,#2f74d8 50%,#1d4fa3 100%); border:2px solid #173f84; box-shadow:0 4px 0 #11306a, 0 6px 14px rgba(0,0,0,.25); text-shadow:1px 1px 0 #11306a}
.dl-test:hover{filter:brightness(1.08)}
.dl-test:active{transform:translateY(3px); box-shadow:0 1px 0 #11306a}
.steps{margin:8px 0 4px 1.3em; padding:0; line-height:1.7}

/* Android 搶先測試按鈕（11/9 合成一塊）：黃色、看得出能按 */
a.dl-android{color:#4a3a00; background:linear-gradient(#ffe680 0%,#ffcc33 50%,#e0a800 100%); border:2px solid #a87c00; box-shadow:0 4px 0 #7a5a00, 0 6px 14px rgba(0,0,0,.25); text-shadow:none; cursor:pointer}
a.dl-android:hover{filter:brightness(1.06)}
a.dl-android:active{transform:translateY(3px); box-shadow:0 1px 0 #7a5a00}
.dl-note{font-size:13px; color:#5a4a60; margin-top:10px; line-height:1.6}