@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Orbitron:wght@600;700;800;900&display=swap');

/* 預設隱藏各皮膚專屬裝飾元素 */
html:not([data-skin="op-field"]) .opfield-only { display: none !important; }
html:not([data-skin="thermal-pos"]) .thermal-only { display: none !important; }
html:not([data-skin="cyber-hud"]) .cyber-only { display: none !important; }
html:not([data-skin="casio-lcd"]) .casio-only { display: none !important; }

/* 當啟用支援 16 段電平表/血條的皮膚時，顯示進度格 */
html[data-skin="op-field"] .davinci-meter-wrap,
html[data-skin="cyber-hud"] .davinci-meter-wrap,
html[data-skin="casio-lcd"] .davinci-meter-wrap {
  display: block !important;
}

/* ==========================================================================
   🎛️ SKIN 2: OP-FIELD (Teenage Engineering OP-1 Field / TP-7 Industrial Synth)
   消光陽極處理鋁合金機身 + 高對比 OLED 點陣黑窗 + 工業橘/鈷藍機械鍵軸
   ========================================================================== */
html[data-skin="op-field"] {
  color-scheme: light;
  --bg-canvas: #D5D2C8;
  --bg-card: #E8E5DC;
  --bg-card-hover: #EFECE4;
  --bg-inset: #DAD6CC;
  --bg-input: #F5F3ED;
  --bg-input-focus: #FFFFFF;
  --border-subtle: #B5B0A4;
  --border-strong: #8C877B;
  --text-primary: #181818;
  --text-secondary: #383836;
  --text-muted: #6E6B64;
  --accent-primary: #FF4F00;
  --accent-primary-hover: #FF621A;
  --accent-primary-active: #D94000;
  --radius-card: 10px;
  --radius-inset: 6px;
  --radius-control: 6px;
}

html[data-skin="op-field"] body {
  background-color: #D5D2C8;
  background-image:
    radial-gradient(#B5B1A6 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.05) 100%);
  background-size: 16px 16px, 100% 100%;
  color: #181818;
  font-family: 'Space Mono', 'Noto Sans TC', monospace;
}

html[data-skin="op-field"] header {
  background: #DFDCD2 !important;
  border-bottom: 2px solid #A8A396 !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}

html[data-skin="op-field"] header h1,
html[data-skin="op-field"] .bento-card h2,
html[data-skin="op-field"] .bento-card h3,
html[data-skin="op-field"] .bento-card .text-\[\#F5F5F7\] {
  color: #161616 !important;
}

html[data-skin="op-field"] .bento-card {
  background: #EAE7DF;
  border: 2px solid #B8B3A6;
  border-radius: 10px;
  box-shadow: 0 5px 0 #ABA699, 0 8px 16px rgba(0,0,0,0.12), inset 0 1px 0 #FFFFFF;
}

/* 首頁主卡片化身為鑲嵌在鋁合金機殼中央的「高對比 OLED 黑色顯示窗」 */
html[data-skin="op-field"] #survivalMainCard {
  background: #0D0E11 !important;
  border: 4px solid #9E998C !important;
  border-radius: 12px !important;
  box-shadow: inset 0 4px 14px rgba(0,0,0,0.9), 0 2px 0 #FFFFFF !important;
  color: #F5F5F7 !important;
}

html[data-skin="op-field"] #survivalMainCard .text-\[\#F5F5F7\],
html[data-skin="op-field"] #survivalMainCard #dailySafeAmount {
  color: #FF4F00 !important;
  font-family: 'Space Mono', monospace !important;
}

html[data-skin="op-field"] #survivalMainCard .apple-inset {
  background: #16181E !important;
  border: 1px solid #2D313B !important;
  color: #ECEFF4 !important;
}

html[data-skin="op-field"] #survivalMainCard #metricDigitalRemaining { color: #38BDF8 !important; }
html[data-skin="op-field"] #survivalMainCard #metricPhysicalTankTotal { color: #34D399 !important; }
html[data-skin="op-field"] #survivalMainCard #metricGrandTotalAvailable { color: #FBBF24 !important; }

html[data-skin="op-field"] .apple-inset {
  background: #DCD8CE !important;
  border: 1.5px solid #B5B0A3 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
  color: #1F1F1D !important;
}

/* 機械鍵軸立體按鍵 (Mechanical Keycaps) */
html[data-skin="op-field"] .btn-primary {
  background: #FF4F00 !important;
  color: #FFFFFF !important;
  border: 2px solid #1E1E1E !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 0 #1E1E1E !important;
  font-weight: 700 !important;
}

html[data-skin="op-field"] .btn-secondary,
html[data-skin="op-field"] .btn-ghost {
  background: #F4F2EC !important;
  color: #181818 !important;
  border: 2px solid #2A2A28 !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 0 #2A2A28 !important;
  font-weight: 700 !important;
}

html[data-skin="op-field"] .btn-press:active {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 #1E1E1E !important;
}

html[data-skin="op-field"] .input-fintech {
  background: #FFFFFF !important;
  border: 2px solid #2A2A28 !important;
  color: #181818 !important;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
}

html[data-skin="op-field"] .sheet-panel {
  background: #EAE7DF !important;
  border: 3px solid #1E1E1E !important;
  box-shadow: 0 12px 0 rgba(0,0,0,0.25) !important;
}

html[data-skin="op-field"] .sheet-panel h3,
html[data-skin="op-field"] .sheet-panel .text-\[\#F5F5F7\] {
  color: #181818 !important;
}

html[data-skin="op-field"] nav.fixed.bottom-0 {
  background: #DCD8CE !important;
  border-top: 2px solid #9E998C !important;
}

html[data-skin="op-field"] .nav-tab-btn {
  border: 1.5px solid #aba699;
  background: #EAE7DF;
  box-shadow: 0 2px 0 #8C877B;
  color: #4A4843 !important;
}

html[data-skin="op-field"] .nav-tab-btn.text-\[\#0A84FF\] {
  background: #FF4F00 !important;
  color: #FFFFFF !important;
  border-color: #181818 !important;
  box-shadow: 0 2px 0 #181818 !important;
}


/* ==========================================================================
   🧾 SKIN 3: THERMAL POS (Japanese Convenience Store & Kitchen Receipt Printer)
   溫潤米白熱感應紙 + 鋸齒撕紙邊緣 + 點陣油墨字體 + 紅色橡皮印章 + 黃色對帳便利貼
   ========================================================================== */
html[data-skin="thermal-pos"] {
  color-scheme: light;
  --bg-canvas: #23211E;
  --bg-card: #F7F3E8;
  --bg-card-hover: #FAF7EE;
  --bg-inset: #EFEAD8;
  --bg-input: #FFFFFF;
  --bg-input-focus: #FFFDF7;
  --border-subtle: #C9C1B0;
  --border-strong: #8F8676;
  --text-primary: #1B1917;
  --text-secondary: #3D3934;
  --text-muted: #6E675F;
  --accent-primary: #D92B2B;
  --accent-primary-hover: #E63939;
  --accent-primary-active: #B81D1D;
  --radius-card: 2px;
  --radius-inset: 2px;
  --radius-control: 2px;
}

html[data-skin="thermal-pos"] body {
  background-color: #23211E;
  background-image: radial-gradient(#33302B 1px, transparent 1px);
  background-size: 14px 14px;
  color: #1B1917;
  font-family: 'Space Mono', 'Noto Sans TC', monospace;
}

html[data-skin="thermal-pos"] header {
  background: #181614 !important;
  border-bottom: 4px solid #D92B2B !important;
}

/* 熱感應紙張卡片與上下鋸齒撕邊效果 */
html[data-skin="thermal-pos"] .bento-card {
  background: #F7F3E8 !important;
  color: #1B1917 !important;
  border: none !important;
  border-top: 2px dashed #BDB4A2 !important;
  border-bottom: 2px dashed #BDB4A2 !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
  position: relative;
}

html[data-skin="thermal-pos"] .bento-card h2,
html[data-skin="thermal-pos"] .bento-card h3,
html[data-skin="thermal-pos"] .bento-card .text-\[\#F5F5F7\],
html[data-skin="thermal-pos"] .bento-card .text-\[\#D1D5DB\],
html[data-skin="thermal-pos"] #dailySafeAmount,
html[data-skin="thermal-pos"] #metricDigitalRemaining,
html[data-skin="thermal-pos"] #metricPhysicalTankTotal,
html[data-skin="thermal-pos"] #metricGrandTotalAvailable,
html[data-skin="thermal-pos"] #tankCashVal {
  color: #181614 !important;
  font-family: 'Space Mono', monospace !important;
}

/* 四級生存狀態徽章 ➔ 斜蓋在收據上的「復古紅色橡皮印章」 */
html[data-skin="thermal-pos"] #tierBadge,
html[data-skin="thermal-pos"] #achieveBadgeTitle {
  background: transparent !important;
  color: #D92B2B !important;
  border: 2.5px solid #D92B2B !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(217, 43, 43, 0.25);
  letter-spacing: 0.04em;
}

html[data-skin="thermal-pos"] .apple-inset {
  background: #EFEAD8 !important;
  border: 1px dashed #A69D8B !important;
  border-radius: 2px !important;
  color: #1B1917 !important;
}

/* 未知黑洞明細 ➔ 斜貼在收據上的「螢光黃待查便利貼 (Sticky Note)」 */
html[data-skin="thermal-pos"] .nle-clip-UNKNOWN_GAP {
  background: #FFF385 !important;
  border: 1px solid #E2CE44 !important;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.18) !important;
  transform: rotate(-0.6deg);
}

html[data-skin="thermal-pos"] .btn-primary {
  background: #1B1917 !important;
  color: #F7F3E8 !important;
  border: 2px solid #1B1917 !important;
  border-radius: 2px !important;
}

html[data-skin="thermal-pos"] .btn-secondary,
html[data-skin="thermal-pos"] .btn-ghost {
  background: #EFEAD8 !important;
  color: #1B1917 !important;
  border: 1.5px solid #57524A !important;
  border-radius: 2px !important;
}

html[data-skin="thermal-pos"] .input-fintech {
  background: #FFFFFF !important;
  border: 1.5px dashed #57524A !important;
  color: #1B1917 !important;
  font-family: 'Space Mono', monospace;
}

html[data-skin="thermal-pos"] .sheet-panel {
  background: #F7F3E8 !important;
  color: #1B1917 !important;
  border-top: 4px dashed #1B1917 !important;
}

html[data-skin="thermal-pos"] .sheet-panel h3,
html[data-skin="thermal-pos"] .sheet-panel .text-\[\#F5F5F7\] {
  color: #1B1917 !important;
}

html[data-skin="thermal-pos"] nav.fixed.bottom-0 {
  background: #181614 !important;
  border-top: 2px dashed #57524A !important;
}

/* ==========================================================================
   🕹️ SKIN 4: CYBER-SURVIVOR (Arcade RPG & Helldivers Tactical Mecha HUD)
   機甲戰術斜切框 + HP生命血條/現金護盾 + 爆擊傷害戰鬥日誌 + 霓虹賽博黃/青/紅
   ========================================================================== */
html[data-skin="cyber-hud"] {
  --bg-canvas: #050711;
  --bg-card: #0B1021;
  --bg-card-hover: #101730;
  --bg-inset: #070B17;
  --bg-input: #050812;
  --border-subtle: rgba(0, 240, 255, 0.32);
  --border-strong: #00F0FF;
  --text-primary: #F0F6FF;
  --text-secondary: #94B8D7;
  --text-muted: #567696;
  --accent-primary: #FCEE0A;
}

html[data-skin="cyber-hud"] body {
  background-color: #050711;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.16), transparent 65%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
}

html[data-skin="cyber-hud"] .tabular-nums,
html[data-skin="cyber-hud"] #dailySafeAmount {
  font-family: 'Orbitron', 'JetBrains Mono', sans-serif !important;
  letter-spacing: 0.03em;
}

html[data-skin="cyber-hud"] #dailySafeAmount {
  color: #FCEE0A !important;
  text-shadow: 0 0 18px rgba(252, 238, 10, 0.55);
}

html[data-skin="cyber-hud"] .bento-card {
  background: linear-gradient(135deg, rgba(12, 19, 38, 0.95) 0%, rgba(7, 11, 24, 0.98) 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-left: 4px solid #00F0FF;
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.12);
}

html[data-skin="cyber-hud"] .apple-inset {
  background: rgba(5, 9, 20, 0.85) !important;
  border: 1px solid rgba(0, 240, 255, 0.22) !important;
  border-radius: 2px !important;
}

html[data-skin="cyber-hud"] .btn-primary {
  background: #FCEE0A !important;
  color: #050711 !important;
  font-weight: 800 !important;
  border: 1px solid #FFF677 !important;
  border-radius: 2px !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: 0 0 14px rgba(252, 238, 10, 0.45) !important;
}

html[data-skin="cyber-hud"] .btn-secondary,
html[data-skin="cyber-hud"] .btn-ghost {
  background: rgba(0, 240, 255, 0.1) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  border-radius: 2px !important;
}

html[data-skin="cyber-hud"] nav.fixed.bottom-0 {
  background: #060916 !important;
  border-top: 2px solid #00F0FF !important;
  box-shadow: 0 -4px 20px rgba(0, 240, 255, 0.25);
}

html[data-skin="cyber-hud"] .nav-tab-btn.text-\[\#0A84FF\] {
  color: #FCEE0A !important;
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.7);
}

/* ==========================================================================
   📟 SKIN 5: CASIO CYBER-POCKET (90s G-SHOCK Data Bank & Retro LCD Handheld)
   防震樹脂深灰錶殼 + 經典灰綠七段式反射液晶面板 + INDIGLO EL 電光藍綠夜光切換
   ========================================================================== */
html[data-skin="casio-lcd"] {
  --bg-canvas: #202426;
  --bg-card: #2B3033;
  --bg-inset: #8E9E7B;
  --text-primary: #ECEFE6;
  --text-secondary: #B8C2B0;
  --text-muted: #7C8778;
  --accent-primary: #E5A93B;
}

html[data-skin="casio-lcd"] body {
  background-color: #1D2022;
  background-image:
    radial-gradient(#2C3135 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  font-family: 'Silkscreen', 'Space Mono', 'Noto Sans TC', monospace;
}

html[data-skin="casio-lcd"] header {
  background: #262A2E !important;
  border-bottom: 3px solid #E5A93B !important;
}

html[data-skin="casio-lcd"] .bento-card {
  background: #2C3136 !important;
  border: 3px solid #454C54 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 8px 0 #141719, 0 12px 20px rgba(0,0,0,0.6) !important;
}

/* 經典灰綠液晶螢幕視窗 (Reflective Olive-Green LCD Panel) */
html[data-skin="casio-lcd"] #survivalMainCard,
html[data-skin="casio-lcd"] .apple-inset {
  background: #8FA17B !important;
  border: 3px solid #3A4234 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.38) !important;
  color: #141E11 !important;
}

/* 當開啟「💡 EL 電光夜光背光 (INDIGLO Backlight)」時整塊液晶發出迷人青綠冷光 */
html[data-skin="casio-lcd"][data-el-light="on"] #survivalMainCard,
html[data-skin="casio-lcd"][data-el-light="on"] .apple-inset {
  background: #0B3B36 !important;
  border-color: #00FFCC !important;
  box-shadow: inset 0 0 22px rgba(0, 255, 204, 0.35), 0 0 18px rgba(0, 255, 204, 0.25) !important;
  color: #00FFCC !important;
}

html[data-skin="casio-lcd"] #survivalMainCard *,
html[data-skin="casio-lcd"] .apple-inset * {
  color: #141E11 !important;
  text-shadow: 1px 1px 0 rgba(20, 30, 17, 0.12);
}

html[data-skin="casio-lcd"][data-el-light="on"] #survivalMainCard *,
html[data-skin="casio-lcd"][data-el-light="on"] .apple-inset * {
  color: #00FFCC !important;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.65) !important;
}

html[data-skin="casio-lcd"] .btn-primary {
  background: #E5A93B !important;
  color: #16181A !important;
  border: 2px solid #111314 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 0 #8F6415 !important;
  font-weight: 800 !important;
}

html[data-skin="casio-lcd"] .btn-secondary,
html[data-skin="casio-lcd"] .btn-ghost {
  background: #3B4248 !important;
  color: #ECEFE6 !important;
  border: 2px solid #181B1E !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 0 #181B1E !important;
}

/* 設定頁「皮膚衣櫃選擇卡」選中態 */
.skin-option-card.is-active-skin {
  border-color: #00E5FF !important;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}