/* DeepForge 主控台 · v2 皮(2026-09-29 Chris:把體驗站改成 earth v3 官網的設計語言,功能不變)
   只在 cookie df_theme=v2 時由 base.html 多載入這一支,疊在 style.css 之上;沒有 cookie 就是現行外觀。
   核准後把預設改成 v2 即正式切換;退回只是改預設。
   規則不變:顏色一律用代幣;連結不用冷色;不連外、不載字型。 */

:root{
  --w-fs-h1: clamp(24px, 2.4vw, 30px);   /* 頁首大標拉開層級,仍是後台尺度 */
  --w-fs-h2: 20px;
  --w-radius-lg: 14px;                    /* 卡片圓角對齊官網 */
  --w-lift: 2px;
}

/* 地:一點點由上而下的光,官網首屏的底 */
body{ background:radial-gradient(1200px 520px at 50% -240px, rgba(255,255,255,.045), transparent 60%), var(--w-bg) }

/* 頂部導覽:官網的玻璃列;版本代號做成 mono 籌碼 */
nav.w-nav{ background:rgba(10,12,15,.72) }
.w-nav__brand{ font-size:var(--w-fs-md) }
.w-nav__brand small{ padding:2px 8px; border:1px solid var(--w-line-2); border-radius:999px; font-size:10.5px; letter-spacing:.14em }
.w-nav__menu a:not(.btn)[aria-current="page"],.w-nav__group[data-active] > summary{ background:transparent; box-shadow:inset 0 -2px 0 var(--w-signal) }

/* 頁首:麵包屑變眉標(mono、訊號色),標題放大;官網 section head 的節奏 */
.w-crumb{ font-family:var(--w-mono); font-size:var(--w-fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--w-signal) }
.w-head{ margin-bottom:var(--w-s6) }
.w-head h1{ font-size:var(--w-fs-h1); letter-spacing:-.01em; line-height:1.18 }
.w-head h1 .muted{ font-size:var(--w-fs-md) }
h2{ letter-spacing:-.005em }

/* 卡片與面板:hover 抬起、進場依序浮起(純 CSS,縮減動態時關閉) */
.card,.box{ transition:transform var(--w-base) var(--w-ease), border-color var(--w-base) var(--w-ease), background var(--w-base) var(--w-ease) }
.card:hover{ transform:translateY(calc(var(--w-lift) * -1)); border-color:var(--w-line-2); background:var(--w-surface-2) }
a.card,a.box{ text-decoration:none }
@keyframes w-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
main > *{ animation:w-rise var(--w-slow) var(--w-ease) both }
main > :nth-child(2){ animation-delay:60ms }
main > :nth-child(3){ animation-delay:120ms }
main > :nth-child(n+4){ animation-delay:180ms }
.cards .card{ animation:w-rise var(--w-slow) var(--w-ease) both }
.cards .card:nth-child(2){ animation-delay:60ms } .cards .card:nth-child(3){ animation-delay:120ms }
.cards .card:nth-child(4){ animation-delay:180ms } .cards .card:nth-child(n+5){ animation-delay:240ms }
.card .lbl{ font-family:var(--w-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--w-text-3) }

/* 籌碼:mono 大寫,跟官網 Badge 同一個聲音 */
.st,.badge{ font-family:var(--w-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px }
.st.draft,.st.closed{ border-color:var(--w-line) }

/* 按鈕:官網高度 */
button,.btn{ min-height:38px; border-radius:var(--w-radius) }
button.sm,.btn.sm{ min-height:28px }

/* 模組子導覽:當前項用底線,不用整塊反白 */
.sub a:not(.btn).on{ background:transparent; box-shadow:inset 0 -2px 0 var(--w-signal); color:var(--w-text); border-radius:var(--w-radius-sm) var(--w-radius-sm) 0 0 }

/* 通知條與空狀態 */
.notice{ border-radius:var(--w-radius-lg) }
.w-empty{ border-radius:var(--w-radius-lg) }

/* 登入:官網產品頁的第一屏(格線背景 + 毛玻璃卡),樣板不動,全靠樣式 */
body:has(> main.login-box){ position:relative; min-height:100vh }
body:has(> main.login-box)::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 100%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 100%);
}
.login-box{ position:relative; z-index:1; max-width:420px; margin:12vh auto; padding:var(--w-s6);
  background:rgba(19,23,28,.82); -webkit-backdrop-filter:blur(var(--w-glass-blur)); backdrop-filter:blur(var(--w-glass-blur)); border-color:var(--w-glass-line);
  animation:w-rise var(--w-slow) var(--w-ease) both }
.login-box h1{ font-size:var(--w-fs-h1); letter-spacing:-.01em }
.login-sub{ font-family:var(--w-mono); font-size:var(--w-fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--w-signal) }
.login-box button{ min-height:42px }

@media (prefers-reduced-motion: reduce){ main > *,.cards .card,.login-box{ animation:none } }