@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   🎚️ GUARDPAY SKIN: DAVINCI STUDIO (Color Grading & Fairlight NLE Console)
   所有規則均封裝於 html[data-skin="davinci"]，切回原版時 100% 無副作用
   ========================================================================== */

html[data-skin="davinci"] {
  --bg-canvas: #0A0B0E;
  --bg-card: #14161C;
  --bg-card-hover: #191C24;
  --bg-inset: #0E1015;
  --bg-input: #0B0D12;
  --bg-input-focus: #08090D;
  --border-subtle: #262A36;
  --border-strong: #3A4052;
  --text-primary: #ECEFF4;
  --text-secondary: #ABB2BF;
  --text-muted: #6C7384;
  --accent-primary: #FF3B30;
  --accent-primary-hover: #FF5147;
  --accent-primary-active: #E0281E;
  --davinci-cyan: #00E5FF;
  --davinci-green: #00E676;
  --davinci-amber: #FFB300;
  --davinci-red: #FF2A3C;
  --radius-card: 6px;
  --radius-inset: 4px;
  --radius-control: 4px;
}

/* 非 DaVinci 模式下隱藏所有 DaVinci 專屬裝飾節點 */
html:not([data-skin="davinci"]) .davinci-only {
  display: none !important;
}

/* DaVinci 模式下背景採用暗房金屬機架紋理與精密掃描格線 */
html[data-skin="davinci"] body {
  background-color: #090A0D;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(ellipse 90% 45% at 50% -10%, rgba(0, 229, 255, 0.07), transparent 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* 深夜高風險防禦模式 ＝ 暗房紅光警戒模式 (Darkroom Safe-light) */
html[data-skin="davinci"] body.high-risk-mode {
  background-color: #0B0608;
  background-image:
    linear-gradient(rgba(255, 42, 60, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 42, 60, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255, 42, 60, 0.18), transparent 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}

/* 數值與時間碼全面切換為工程等寬字體 */
html[data-skin="davinci"] .tabular-nums,
html[data-skin="davinci"] .davinci-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* 頂部導播室監看 Header */
html[data-skin="davinci"] header {
  background: linear-gradient(180deg, #181B22 0%, #111319 100%) !important;
  border-bottom: 1px solid #2A2F3D !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 硬體機架面板卡片 (Rack-mount Console Module) */
html[data-skin="davinci"] .bento-card {
  background: linear-gradient(180deg, #171A21 0%, #12141A 100%);
  border: 1px solid #282D3B;
  border-top-color: #363C4E;
  border-bottom-color: #0A0B0E;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px -4px rgba(0, 0, 0, 0.75);
  position: relative;
}

/* 機架四角精密螺絲孔裝飾 */
html[data-skin="davinci"] .bento-card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0C0E12;
  border: 1px solid #2E3444;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* 內嵌示波器凹槽 (Scope Inset Well) */
html[data-skin="davinci"] .apple-inset {
  background: #0B0D12 !important;
  border: 1px solid #222632 !important;
  border-top-color: #07080B !important;
  border-left-color: #090A0E !important;
  border-radius: 4px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75);
}

/* 四級生存狀態：改為導播室監看器外框訊號燈 */
html[data-skin="davinci"] .tier-glow-WEALTHY {
  border-color: rgba(0, 230, 118, 0.45) !important;
  border-top: 2px solid #00E676 !important;
  box-shadow: 0 0 24px -6px rgba(0, 230, 118, 0.2), inset 0 1px 12px rgba(0, 230, 118, 0.05) !important;
}

html[data-skin="davinci"] .tier-glow-NORMAL {
  border-color: rgba(0, 229, 255, 0.45) !important;
  border-top: 2px solid #00E5FF !important;
  box-shadow: 0 0 24px -6px rgba(0, 229, 255, 0.2), inset 0 1px 12px rgba(0, 229, 255, 0.05) !important;
}

html[data-skin="davinci"] .tier-glow-BEGGAR_HERO {
  border-color: rgba(255, 179, 0, 0.55) !important;
  border-top: 2px solid #FFB300 !important;
  box-shadow: 0 0 26px -6px rgba(255, 179, 0, 0.25), inset 0 1px 14px rgba(255, 179, 0, 0.06) !important;
}

html[data-skin="davinci"] .tier-glow-DIRT_EATING {
  border-color: rgba(255, 42, 60, 0.7) !important;
  border-top: 2px solid #FF2A3C !important;
  box-shadow: 0 0 32px -4px rgba(255, 42, 60, 0.35), inset 0 1px 18px rgba(255, 42, 60, 0.1) !important;
}

/* DaVinci 實體導播台按鍵 (Hardware Console Keys) */
html[data-skin="davinci"] .btn-primary {
  background: linear-gradient(180deg, #FF453A 0%, #D9261C 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #FF6961 !important;
  border-bottom-color: #8E150E !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  letter-spacing: 0.03em;
}

html[data-skin="davinci"] .btn-primary:hover {
  background: linear-gradient(180deg, #FF5B52 0%, #E63127 100%) !important;
}

html[data-skin="davinci"] .btn-secondary,
html[data-skin="davinci"] .btn-ghost {
  background: linear-gradient(180deg, #252936 0%, #1B1E28 100%) !important;
  border: 1px solid #353B4D !important;
  border-bottom-color: #101218 !important;
  border-radius: 4px !important;
  color: #D8DEE9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-skin="davinci"] .btn-secondary:hover,
html[data-skin="davinci"] .btn-ghost:hover {
  background: linear-gradient(180deg, #2E3444 0%, #222632 100%) !important;
  border-color: #00E5FF !important;
  color: #FFFFFF !important;
}

html[data-skin="davinci"] .btn-press:active {
  transform: translateY(1.5px) scale(0.99) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* 輸入框：暗房數值輸入槽 */
html[data-skin="davinci"] .input-fintech {
  background: #08090C !important;
  border: 1px solid #282D3C !important;
  border-radius: 4px !important;
  color: #00E5FF !important;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

html[data-skin="davinci"] .input-fintech:focus {
  border-color: #00E5FF !important;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.9) !important;
}

/* 今日安全可用額度：巨型廣播級 Timecode 讀數 */
html[data-skin="davinci"] #dailySafeAmount {
  font-family: 'JetBrains Mono', monospace !important;
  color: #00E5FF !important;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.42);
  letter-spacing: -0.03em;
}

html[data-skin="davinci"] .tier-glow-BEGGAR_HERO #dailySafeAmount {
  color: #FFB300 !important;
  text-shadow: 0 0 18px rgba(255, 179, 0, 0.45);
}

html[data-skin="davinci"] .tier-glow-DIRT_EATING #dailySafeAmount {
  color: #FF2A3C !important;
  text-shadow: 0 0 20px rgba(255, 42, 60, 0.6);
}

/* 分段式 LED 峰值電平表 (16-Segment dB Peak Meter) */
.davinci-meter-wrap {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.davinci-meter-scale {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #6C7384;
  margin-bottom: 3px;
}

.davinci-led-bar {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  height: 7px;
  background: #060709;
  padding: 1.5px;
  border-radius: 2px;
  border: 1px solid #1E222D;
}

.davinci-led-seg {
  height: 100%;
  border-radius: 1px;
  background: #1A1E26;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.davinci-led-seg.on-green { background: #00E676; box-shadow: 0 0 5px rgba(0, 230, 118, 0.6); }
.davinci-led-seg.on-cyan { background: #00E5FF; box-shadow: 0 0 5px rgba(0, 229, 255, 0.6); }
.davinci-led-seg.on-amber { background: #FFB300; box-shadow: 0 0 5px rgba(255, 179, 0, 0.65); }
.davinci-led-seg.on-red { background: #FF2A3C; box-shadow: 0 0 6px rgba(255, 42, 60, 0.85); }

/* 導播室 CLIP 削波過載警示燈 */
@keyframes clipPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 42, 60, 0.9); }
  50% { opacity: 0.45; box-shadow: 0 0 2px rgba(255, 42, 60, 0.3); }
}

.davinci-clip-lamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  background: #1A1215;
  color: #5E4348;
  border: 1px solid #332024;
  letter-spacing: 0.05em;
}

.davinci-clip-lamp.is-clipping {
  background: #FF2A3C;
  color: #FFFFFF;
  border-color: #FF808B;
  animation: clipPulse 0.9s infinite ease-in-out;
}

/* 示波器與調光轉輪面板 (Scopes & Color Wheels Deck) */
.davinci-scopes-deck {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 10px;
  background: #090B0F;
  border: 1px solid #232834;
  border-radius: 4px;
  padding: 10px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.85);
}

@media (max-width: 639px) {
  .davinci-scopes-deck {
    grid-template-columns: 1fr;
  }
}

.davinci-scope-box {
  background: #06070A;
  border: 1px solid #1C202B;
  border-radius: 3px;
  padding: 8px;
  position: relative;
  overflow: hidden;
}

.davinci-scope-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #8E95A5;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 調光主轉輪 (Master Offset Color Wheel / Jog Dial) */
.davinci-wheel-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 2px auto;
  position: relative;
  background:
    radial-gradient(circle at center, #0D1017 44%, transparent 45%),
    conic-gradient(
      from 0deg,
      rgba(255, 59, 48, 0.55),
      rgba(255, 179, 0, 0.55),
      rgba(0, 230, 118, 0.55),
      rgba(0, 229, 255, 0.55),
      rgba(179, 136, 255, 0.55),
      rgba(255, 59, 48, 0.55)
    );
  border: 2px solid #2B3140;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.davinci-wheel-ring:hover {
  border-color: #00E5FF;
}

.davinci-wheel-crosshair {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* NLE 多軌剪輯時間軸明細片段 (Timeline Clip Item) */
html[data-skin="davinci"] .nle-clip-item {
  border-left-width: 4px !important;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, #0D0F14 100%) !important;
}

html[data-skin="davinci"] .nle-clip-EXPENSE { border-left-color: #FF3B30 !important; }
html[data-skin="davinci"] .nle-clip-CASH { border-left-color: #00E676 !important; }
html[data-skin="davinci"] .nle-clip-INTERNAL_TRANSFER { border-left-color: #00E5FF !important; }
html[data-skin="davinci"] .nle-clip-INCOME_DEPOSIT { border-left-color: #00E676 !important; }
html[data-skin="davinci"] .nle-clip-ADVANCE_OUT,
html[data-skin="davinci"] .nle-clip-ADVANCE_IN { border-left-color: #B388FF !important; }

/* 未知漏帳黑洞 ＝ 掉幀斜線警示片段 (Dropped Frame Hazard Clip) */
html[data-skin="davinci"] .nle-clip-UNKNOWN_GAP {
  border-left-color: #FFB300 !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 179, 0, 0.08),
      rgba(255, 179, 0, 0.08) 8px,
      rgba(13, 15, 20, 0.95) 8px,
      rgba(13, 15, 20, 0.95) 16px
    ) !important;
}

/* 剪輯台底部導覽列 (DaVinci Resolve Workspace Switcher) */
html[data-skin="davinci"] nav.fixed.bottom-0 {
  background: #0D0F14 !important;
  border-top: 1px solid #282D3C !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.85);
}

html[data-skin="davinci"] .nav-tab-btn {
  border-radius: 4px !important;
  border: 1px solid transparent;
  font-family: 'JetBrains Mono', sans-serif;
}

html[data-skin="davinci"] .nav-tab-btn.text-\[\#0A84FF\] {
  color: #FF3B30 !important;
  background: #1A1D26 !important;
  border-color: #343A4C !important;
  border-top: 2px solid #FF3B30 !important;
  box-shadow: inset 0 2px 6px rgba(255, 59, 48, 0.12);
}

/* 彈窗面板轉化為 DaVinci 浮動檢視器 (Floating Inspector Node) */
html[data-skin="davinci"] .sheet-panel {
  background: #13161D !important;
  border: 1px solid #32384A !important;
  border-top: 2px solid #00E5FF !important;
  border-radius: 6px !important;
}

@keyframes spliceFlash {
  0% { filter: brightness(1.65) contrast(1.15); }
  100% { filter: brightness(1) contrast(1); }
}

.davinci-splice-flash {
  animation: spliceFlash 0.25s ease-out;
}