/* ============================================================
   73-HotDash — Panel System
   Glassmorphism + 霓虹邊框 + 六角裁切
   ============================================================ */

/* ── 基礎面板 ── */
.panel {
  position: relative;
  background: var(--cy-surface);
  border: 1px solid rgba(0,245,212,0.1);
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  overflow: hidden;
  z-index: var(--z-panels);
  box-shadow:
    0 0 0 1px rgba(0,245,212,0.06),
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 40px rgba(0,0,0,0.6);
}

/* 面板 SVG 雜訊紋理 */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* ── 面板標題列 ── */
.panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(0,245,212,0.08);
  background: rgba(0,245,212,0.02);
}
.panel-header .panel-icon {
  width: 18px;
  height: 18px;
  color: var(--cy-primary);
  opacity: 0.8;
}
.panel-header .panel-title {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-primary);
}
.panel-header .panel-status {
  margin-left: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cy-success);
  box-shadow: 0 0 6px var(--cy-success);
  animation: pulse 2s infinite;
}

/* ── 面板內容 ── */
.panel-body {
  padding: var(--sp-4);
  position: relative;
  z-index: 2;
}

/* ── 霓虹高亮面板 ── */
.panel--glow {
  border-color: rgba(0,245,212,0.2);
  box-shadow:
    0 0 4px rgba(0,245,212,0.15),
    0 0 20px rgba(0,245,212,0.06),
    inset 0 0 20px rgba(0,245,212,0.02),
    0 12px 48px rgba(0,0,0,0.6);
}

/* ── 危險面板 ── */
.panel--danger {
  border-color: rgba(255,0,84,0.25);
  box-shadow:
    0 0 4px rgba(255,0,84,0.2),
    0 0 20px rgba(255,0,84,0.08),
    0 8px 40px rgba(0,0,0,0.6);
}
.panel--danger .panel-header {
  border-bottom-color: rgba(255,0,84,0.15);
  background: rgba(255,0,84,0.04);
}
.panel--danger .panel-title { color: var(--cy-danger); }

/* ── 六角切角面板 ── */
.panel--hex {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  border: none;
  border-radius: 0;
}
/* 偽元素製作切角邊框 */
.panel--hex-wrap {
  position: relative;
  padding: 1px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background: linear-gradient(135deg, rgba(0,245,212,0.3), rgba(139,92,246,0.2));
}

/* ── 全息面板 ── */
.panel--holo {
  background: linear-gradient(
    135deg,
    rgba(0,245,212,0.06) 0%,
    rgba(139,92,246,0.05) 25%,
    rgba(255,0,84,0.04) 50%,
    rgba(0,230,118,0.05) 75%,
    rgba(0,245,212,0.06) 100%
  );
  background-size: 400% 400%;
  animation: holoShift 15s ease infinite;
}
@keyframes holoShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── 統計卡片 ── */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0,245,212,0.03);
  border: 1px solid rgba(0,245,212,0.08);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--cy-primary);
  opacity: 0.6;
}
.stat-card .stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cy-text-dim);
}
.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--cy-primary);
}
.stat-card--danger::after { background: var(--cy-danger); }
.stat-card--danger .stat-value { color: var(--cy-danger); }
.stat-card--accent::after { background: var(--cy-accent); }
.stat-card--accent .stat-value { color: var(--cy-accent); }
.stat-card--success::after { background: var(--cy-success); }
.stat-card--success .stat-value { color: var(--cy-success); }

/* ── 觸控漣漪 ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple-host .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,245,212,0.2);
  transform: scale(0);
  animation: rippleOut 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6,10,20,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  width: min(560px, 90vw);
  max-height: 80vh;
  animation: modalIn 0.3s ease-out;
}
@keyframes modalIn {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── HUD 按鈕 ── */
.btn-hud {
  background: rgba(0,245,212,0.06);
  border: 1px solid rgba(0,245,212,0.15);
  color: var(--cy-text);
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: var(--font-mono);
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-hud:hover {
  background: rgba(0,245,212,0.12);
  border-color: rgba(0,245,212,0.3);
}
.btn-hud.active {
  background: rgba(0,245,212,0.15);
  border-color: var(--cy-primary);
  color: var(--cy-primary);
}

/* ── HUD 時鐘 ── */
.hud-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.hud-clock__time {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--cy-primary);
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(0,245,212,0.3);
}
.hud-clock__date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--cy-text-dim);
}

/* ── 搜尋輸入框 ── */
.search-input {
  background: rgba(0,245,212,0.04);
  border: 1px solid rgba(0,245,212,0.12);
  color: var(--cy-text);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  width: 140px;
  transition: border-color 0.2s, width 0.3s;
}
.search-input:focus {
  outline: none;
  border-color: var(--cy-primary);
  width: 200px;
  box-shadow: 0 0 8px rgba(0,245,212,0.1);
}
.search-input::placeholder {
  color: rgba(255,255,255,0.25);
}

/* ── 篩選下拉 ── */
.filter-select {
  background: rgba(0,245,212,0.04);
  border: 1px solid rgba(0,245,212,0.12);
  color: var(--cy-text);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filter-select:focus {
  outline: none;
  border-color: var(--cy-primary);
}
.filter-select option {
  background: var(--cy-bg);
  color: var(--cy-text);
}

/* ── Loading 骨架屏 ── */
.loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,245,212,0.03) 0%,
    rgba(0,245,212,0.08) 50%,
    rgba(0,245,212,0.03) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}