/* z2-entry — 登入、候補、歡迎（只用 .v-login / .v-wait / .v-welcome 開頭的選擇器）
   語言：舊作業系統的登入對話框（灰色斜面、標題列、凹陷欄位）× 未來感（全像彩虹膜、液晶發光數字、掃描線、霓虹）。 */

/* =========================================================
   Z2 登入頁
   ========================================================= */

/* --- 圖示＋標題 --- */
.v-login .hero{min-height:96px;gap:14px;align-items:center}
.v-login .hero-icon{width:80px;height:80px;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(43,246,255,.35))}
.v-login .hero h1{font-size:1.62rem;line-height:1.28;letter-spacing:.02em;
  text-shadow:2px 2px 0 var(--hi),3px 3px 0 rgba(255,79,216,.45),-1px 0 0 rgba(43,246,255,.35)}

/* --- 一句介紹 --- */
.v-login .pitch > p:first-of-type{font-size:.94rem;line-height:1.6;color:var(--ink)}
.v-login .pitch > p:last-of-type{
  font-size:.84rem;line-height:1.55;color:var(--ink);
  background:var(--tip);border:1px solid var(--dk);padding:7px 10px 7px 32px;position:relative;
  margin:0;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.v-login .pitch > p:last-of-type::before{content:"?";position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7FB2FF,#0B44D6);color:#fff;font:700 .7rem/16px Georgia,serif;text-align:center;box-shadow:1px 1px 0 var(--dk)}

/* --- 功能三格（未來感：全像邊、液晶發光） --- */
.v-login .feat{gap:6px;padding:6px;position:relative;
  background:linear-gradient(var(--chrome),var(--chrome)) padding-box,var(--foil) border-box;background-size:auto,300% 100%}
.v-login .feat .tile{border-left:3px solid transparent;
  border-image:var(--foil) 1;
  background:radial-gradient(140% 120% at 0% 0%,rgba(43,246,255,.14),transparent 55%),var(--lcd)}
.v-login .feat .tile::before{content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;background:var(--neon);
  box-shadow:0 0 8px var(--neon);animation:z2blink 1.6s steps(2) infinite}
.v-login .feat .tile:nth-child(2)::before{background:var(--neon-2);box-shadow:0 0 8px var(--neon-2);animation-delay:.5s}
.v-login .feat .tile:nth-child(3)::before{background:#FFF1A8;box-shadow:0 0 8px #FFF1A8;animation-delay:1s}
.v-login .feat .tile .lbl{color:#7FE3D3}
.v-login .feat .tile .sub{color:#A9CCC6;line-height:1.45}
@keyframes z2blink{50%{opacity:.25}}

/* --- 登入面板：舊作業系統登入視窗 --- */
.v-login .panel{padding:0 14px 12px;gap:9px;
  box-shadow:var(--out),0 0 0 1px var(--dk),5px 6px 0 rgba(0,0,0,.28)}
.v-login .panel::before{content:"LOGIN.EXE — 登入拾訊課堂";
  margin:3px -11px 2px;padding:0 10px;height:26px;line-height:26px;font-size:.84rem;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),var(--foil);
  background-size:auto,300% 100%}
.v-login .panel h2{display:flex;align-items:center;gap:8px;font-size:1rem;margin-top:2px}
.v-login .panel h2::before{content:"";width:22px;height:22px;flex:none;
  background:
    radial-gradient(circle at 7px 11px,transparent 3px,var(--sel) 3.5px 6.5px,transparent 7px),
    linear-gradient(var(--sel),var(--sel)) 12px 9px/10px 4px no-repeat,
    linear-gradient(var(--sel),var(--sel)) 17px 13px/3px 4px no-repeat;
  filter:drop-shadow(1px 1px 0 var(--hi))}
.v-login .panel .gbtn{min-height:44px;background:var(--field);font-size:.95rem;padding-left:14px}
.v-login .panel .gbtn:hover{background:#F2FDFF}
.v-login .panel .gbtn svg{width:20px;height:20px}
.v-login .panel .or{font-size:.76rem}
.v-login .panel .inp{min-height:44px;font-size:1rem;font-family:var(--mono)}
.v-login .panel .inp::placeholder{color:#8A9099}
.v-login .panel .inp:focus{outline:0;box-shadow:var(--in),0 0 0 2px var(--neon),0 0 14px rgba(43,246,255,.45)}
.v-login .panel .gbtn:active{box-shadow:var(--in);background:#EEF1F4}
.v-login .panel .btn.primary{min-height:44px;width:100%;font-size:.98rem}
.v-login .panel .btn.ghost.sm{min-height:40px;align-self:flex-start}
.v-login .panel .note{line-height:1.55}
.v-login .panel .fine{font-size:.72rem;line-height:1.45;padding-top:7px;border-top:1px solid var(--lo);box-shadow:inset 0 1px 0 var(--hi)}
.v-login .panel .fine a{display:inline-block;min-height:32px;line-height:32px}

/* --- 範例區 --- */
.v-login #sec-example{padding-top:4px}

/* ---------- 手機：拆開 .login/.pitch，讓所有區塊成為 .v-login 的直接排序項目 ---------- */
@media (max-width:720px){
  .v-login{gap:10px;padding-top:8px}
  .v-login .login,.v-login .pitch{display:contents}
  .v-login .hero{order:1;min-height:96px}
  .v-login .pitch > p:first-of-type{order:2;font-size:.9rem;line-height:1.55}
  .v-login .panel{order:3}
  .v-login .feat{order:4;margin-top:2px}
  .v-login #sec-example{order:5;padding-top:2px;gap:5px}
  .v-login #sec-example > .sec-head{padding-bottom:2px}
  .v-login #sec-example > .sec-head h2{font-size:.86rem;line-height:1.3}
  .v-login .pitch > p:last-of-type{order:6}
  .v-login .hero h1{font-size:1.5rem}

  /* 登入面板壓到約 300px */
  .v-login .panel{gap:7px;padding-bottom:9px}
  .v-login .panel::before{margin-bottom:0}
  .v-login .panel h2{font-size:.96rem}
  .v-login .panel .fine{padding-top:6px}

  /* 功能三格：三條橫列（數字｜標籤＋說明），約 110px */
  .v-login .feat{grid-template-columns:1fr;gap:3px;padding:4px}
  .v-login .feat .tile{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:10px;row-gap:0;padding:2px 22px 2px 10px;align-items:center;min-height:0}
  .v-login .feat .tile .num{grid-row:1/3;font-size:1.3rem;line-height:1}
  .v-login .feat .tile .lbl{font-size:.64rem;line-height:1.25}
  .v-login .feat .tile .sub{font-size:.72rem;white-space:nowrap;line-height:1.3}
  .v-login .feat .tile::before{top:50%;margin-top:-3px}
}

/* ---------- 電腦：.v-login 本身是兩欄格線；左欄 420｜右欄 352，範例全寬在下 ---------- */
@media (min-width:721px){
  .v-login{display:grid;grid-template-columns:420px 352px;justify-content:space-between;align-content:start;align-items:start;
    column-gap:20px;row-gap:8px;padding-top:24px}
  .v-login .login,.v-login .pitch{display:contents}
  .v-login .hero{grid-column:1;grid-row:1;min-height:104px}
  .v-login .pitch > p:first-of-type{grid-column:1;grid-row:2;min-height:48px}
  .v-login .feat{grid-column:1;grid-row:3}
  .v-login .panel{grid-column:2;grid-row:1/5}
  .v-login #sec-example{grid-column:1/-1;grid-row:5;margin-top:10px;padding-top:0}
  .v-login .pitch > p:last-of-type{grid-column:1/-1;grid-row:6;margin-top:10px}
  .v-login .hero h1{font-size:2rem}
  .v-login .feat .tile{min-height:112px;padding:8px 10px}
  .v-login .feat .tile .sub{font-size:.74rem}
}

/* =========================================================
   Z2 候補頁
   ========================================================= */
.v-wait{gap:14px;padding-top:16px}
.v-wait .bigmsg{align-items:stretch;gap:14px}
.v-wait .bigmsg h1{min-height:0;display:flex;align-items:flex-end;font-size:1.5rem;line-height:1.3;
  padding:0 0 10px;border-bottom:1px solid var(--lo);box-shadow:0 1px 0 var(--hi)}

/* 順位液晶面板 */
.v-wait .hud{padding:6px;position:relative;
  background:linear-gradient(var(--chrome),var(--chrome)) padding-box,var(--foil) border-box;
  border:2px solid transparent;background-size:auto,300% 100%;animation:foil 12s linear infinite}
.v-wait .hud .tile{min-height:128px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;
  padding:12px 16px 12px;align-items:end;
  background:radial-gradient(120% 140% at 100% 50%,rgba(43,246,255,.16),transparent 60%),var(--lcd)}
.v-wait .hud .tile .lbl{grid-column:1;grid-row:1;font-size:.8rem;letter-spacing:.12em;color:#7FE3D3}
.v-wait .hud .tile .num{grid-column:2;grid-row:1/4;align-self:center;position:relative;
  font-size:5.4rem;line-height:.9;letter-spacing:.04em;color:var(--lcd-ink);
  text-shadow:0 0 6px rgba(124,255,233,.9),0 0 22px rgba(43,246,255,.65)}
.v-wait .hud .tile .sub{grid-column:1;grid-row:3;font-size:.8rem;white-space:normal;color:#A9CCC6;line-height:1.45}
/* 「排隊中」指示燈 + 刻度 */
.v-wait .hud .tile::before{content:"QUEUE ▮ 排隊中";grid-column:1;grid-row:2;align-self:center;
  font-family:var(--lcdf);font-size:1.1rem;letter-spacing:.08em;color:#FF7BE3;
  text-shadow:0 0 8px rgba(255,79,216,.8)}

.v-wait .bigmsg > p{font-size:.94rem;line-height:1.65;color:var(--ink);
  background:var(--tip);border:1px solid var(--dk);padding:9px 12px;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.v-wait .bigmsg .row{gap:10px;flex-wrap:nowrap}
.v-wait .bigmsg .row .btn{min-height:46px;flex:1 1 0}
.v-wait .bigmsg .row .btn.primary{flex:2 1 0}

@media (min-width:721px){
  .v-wait{padding-top:24px;gap:22px}
  .v-wait .bigmsg{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px 20px}
  .v-wait .bigmsg h1{grid-column:1/-1;font-size:2rem;min-height:60px}
  .v-wait .hud{grid-column:1}
  .v-wait .bigmsg > p{grid-column:1/-1}
  .v-wait .bigmsg .row{grid-column:1/-1;justify-content:flex-start}
  .v-wait .bigmsg .row .btn,
  .v-wait .bigmsg .row .btn.primary{flex:0 0 auto;min-width:140px}
  .v-wait .bigmsg .row .btn.primary{min-width:220px}
}

/* =========================================================
   Z2 歡迎頁（沒有課程時）
   ========================================================= */
.v-welcome{gap:16px;padding-top:16px}
.v-welcome .intro{gap:8px}
.v-welcome .intro h1{font-size:1.6rem}
.v-welcome .intro p{font-size:.94rem;line-height:1.65;color:var(--ink)}

/* 三步驟液晶指示 */
.v-welcome .intro::after{content:"① 建立課程　→　② 邀請同學　→　③ 丟上課資料";
  display:block;margin-top:4px;padding:6px 10px;background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--in);
  font-family:var(--pixel);font-size:.78rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 6px rgba(124,255,233,.6)}

/* 設定精靈視窗 */
.v-welcome .empty.brand{padding:40px 16px 16px 108px;min-height:170px;gap:8px;color:var(--ink-2);
  box-shadow:var(--out),0 0 0 1px var(--dk),5px 6px 0 rgba(0,0,0,.28)}
.v-welcome .empty.brand::after{content:"SETUP.EXE — 新課程精靈";position:absolute;left:3px;right:3px;top:3px;height:26px;line-height:26px;
  padding:0 10px;font-family:var(--pixel);font-size:.84rem;color:#0A0C10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),var(--foil);
  background-size:auto,300% 100%;animation:foil 12s linear infinite}
.v-welcome .empty.brand::before{width:76px;height:76px;left:16px;top:44px;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25)) drop-shadow(0 0 14px rgba(43,246,255,.35))}
.v-welcome .empty.brand b{font-size:1.2rem}
.v-welcome .empty.brand span{min-width:0;overflow-wrap:anywhere;white-space:normal;font-size:.88rem;line-height:1.55}
.v-welcome .empty.brand .row{margin-top:6px;gap:8px}
.v-welcome .empty.brand .row .btn{min-height:46px}
.v-welcome .empty.brand .row .btn.primary{font-size:1rem;padding-left:22px;padding-right:22px}
.v-welcome .empty.brand .row .btn.primary::before{content:"＋";margin-right:2px}

@media (max-width:640px){
  .v-welcome .empty.brand{padding:40px 14px 14px 14px}
  .v-welcome .empty.brand::before{width:56px;height:56px;left:14px;top:42px}
  .v-welcome .empty.brand b,
  .v-welcome .empty.brand span{padding-left:68px}
  .v-welcome .empty.brand b{min-height:22px}
  .v-welcome .empty.brand .row{flex-direction:column;align-items:stretch;margin-top:10px}
  .v-welcome .empty.brand .row .btn{width:100%}
  .v-welcome .empty.brand .row .btn.primary{min-height:50px}
}
@media (min-width:641px){
  .v-welcome{padding-top:24px;gap:22px}
  .v-welcome .intro h1{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
  .v-login .feat .tile::before,.v-wait .hud,.v-wait .hud .tile::before,.v-welcome .empty.brand::after{animation:none}
}

/* 整合：候補 LCD 單欄（原本是行內樣式） */
.v-wait .hud.queue{grid-template-columns:minmax(0,1fr)}

/* ===== 整合 r3 ===== */
/* 3. 候補頁：標題放大、補上「開通後你可以」功能預覽，填滿下方空白 */
.v-wait .bigmsg h1{font-size:clamp(1.6rem,6vw,2rem);min-height:80px;display:flex;align-items:center}
.v-wait .wait-sub{font-family:var(--pixel);font-size:1rem;margin-top:6px}
.v-wait .feat{width:100%}
@media (max-width:640px){.v-wait .feat{grid-template-columns:1fr}.v-wait .feat .tile .num{font-size:1.4rem}}
.v-wait .bigmsg > .row .btn{min-height:44px}
/* 9. 登入頁範例：沒有勾選框時不留空槽；照片說明下方留白 */
.v-login #sec-example .item{grid-template-columns:minmax(0,1fr)}
.v-login #sec-example .item .gut{display:none}
.v-login #sec-example #sec-summary > p.small{margin-bottom:10px!important}

/* ===== 整合 r4 ===== */
@media (min-width:641px){.v-wait .bigmsg .wait-sub,.v-wait .bigmsg .feat{grid-column:1/-1}}
.v-login #sec-example section.sec{margin-top:16px}

/* ===== 整合 r5：登入頁動效克制 ===== */
.v-login *,.v-wait *,.v-welcome *{animation-iteration-count:1}

/* ===== 18 歲確認 ===== */
.v-login .age-ok{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px;cursor:pointer;font-size:.92rem;line-height:1.4}
.v-login .age-ok input{width:28px;height:28px;flex:none;accent-color:var(--sel);margin:0}
.v-login .age-ok a{color:var(--sel)}
.v-login .gbtn.primary{justify-content:center}