/* ==========================================================================
   定製軟件服務線 專用樣式
   路徑：/css/software.css
   範圍：僅 /software/ 目錄下的頁面引用，不影響站內其他頁面
   配色：黑、白、#FF5F00 及其灰階（沿用 /css/style.css 的 CSS 變數）
   ========================================================================== */

.sw-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 高度統一：各系統頁正文長短不一，若不設下限，hero 會出現 421–590px 的落差。
   實測最高的系統頁為 590px（考勤／會計，h1 摺兩行），故取 600px 為基準，
   令所有頁面 hero 高度一致，同時不影響內容更長的首頁。
   box-sizing 已於 style.css 設為 border-box，故 min-height 已含上下 padding。
   兩個斷點各自調低，避免窄螢幕出現大片空白。 */
.sw-hero {
  min-height: 600px;
  padding: 132px 0 56px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(255, 95, 0, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}

.sw-hero h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--white);
  margin: 18px 0 20px;
  max-width: 900px;
}

.sw-hero h1 em {
  font-style: normal;
  color: var(--primary);
}

.sw-hero .lead {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.95;
  color: var(--text-dim);
  max-width: 780px;
  margin: 0 0 30px;
}

.sw-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* --- 麵包屑 --- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text-faint);
}

.crumb a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t);
}

.crumb a:hover {
  color: var(--primary);
}

.crumb span {
  color: var(--text-faint);
}

.crumb .crumb-here {
  color: var(--text);
}

/* --- 按鈕 --- */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}

.sw-btn-primary {
  background: var(--primary);
  color: var(--black);
  box-shadow: 0 8px 26px rgba(255, 95, 0, 0.26);
}

.sw-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(255, 95, 0, 0.38);
}

.sw-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}

.sw-btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- 首屏資料點 --- */
.sw-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 38px 0 0;
}

.sw-fact {
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.sw-fact b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.sw-fact span {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* --- 段落 --- */
.sw-sec {
  padding: 76px 0;
  border-bottom: 1px solid var(--border);
}

.sw-sec-alt {
  background: rgba(255, 255, 255, 0.015);
}

.sw-sec h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 18px;
  max-width: 880px;
}

.sw-sec h2 em {
  font-style: normal;
  color: var(--primary);
}

.sw-sec .sec-lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-dim);
  max-width: 820px;
  margin: 0 0 34px;
}

.sw-sec h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px;
}

.sw-sec p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dim);
}

/* --- 卡片格 --- */
.sw-grid {
  display: grid;
  gap: 20px;
}

.sw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sw-grid-4 { grid-template-columns: repeat(4, 1fr); }

.sw-card {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--t);
}

.sw-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
}

.sw-card p {
  margin: 0;
}

.sw-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid rgba(255, 95, 0, 0.28);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

/* --- 清單 --- */
.sw-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-list li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.sw-list li:last-child {
  border-bottom: 0;
}

.sw-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary);
}

.sw-list li b {
  color: var(--text);
  font-weight: 700;
}

/* --- 圖版 --- */
.sw-figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.sw-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.sw-figure figcaption {
  padding: 16px 22px 18px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.015);
}

.sw-figure figcaption b {
  color: var(--white);
  font-weight: 700;
  margin-right: 8px;
}

.sw-figure-missing {
  padding: 60px 22px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* --- 圖文並列 ---
   分欄時圖只餘約 554px，內嵌 SVG 的 viewBox 為 1200 寬，縮放後 13px 字
   實測只得 6px，完全讀唔到。改為圖在上、文字在下，圖即取回全寬 1152px
   （縮放 0.96），字才睇得清。 */
.sw-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

/* --- 單據鏈（縮圖式介紹）---
   用途：ERP 頁「核心問題」一節，用文字磚加金額示範報價→收款一條線走完。
   與 hero 下方互動示範模組刻意做出區隔：這裡純靜態、不可點、無 hover 效果，
   避免訪客誤以為它同樣可以按。 */
.sw-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.sw-chain-item {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.sw-chain-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.6;
}

.sw-chain-item:last-child::after {
  content: none;
}

.sw-chain-no {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.sw-chain-item b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}

.sw-chain-item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-dim);
}

.sw-chain-item em {
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
}

.sw-chain-note {
  margin: 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 95, 0, 0.06);
  border: 1px solid rgba(255, 95, 0, 0.2);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}

.sw-split .sw-figure {
  margin: 0;
}

/* --- 交付流程 --- */
.sw-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.sw-flow-item {
  position: relative;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}

.sw-flow-item b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.sw-flow-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.sw-steps {
  display: grid;
  gap: 18px;
}

.sw-step {
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  border-left: 3px solid var(--primary);
}

.sw-step h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.sw-step p {
  margin: 0 0 16px;
}

.sw-deliver {
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 95, 0, 0.06);
  border: 1px solid rgba(255, 95, 0, 0.2);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.sw-deliver span {
  color: var(--primary);
  font-weight: 800;
  margin-right: 6px;
}

/* --- 表格 --- */
.sw-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14.5px;
}

.sw-table thead th {
  padding: 16px 20px;
  background: var(--surface-2);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.sw-table tbody td {
  padding: 16px 20px;
  color: var(--text-dim);
  line-height: 1.75;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

.sw-table tbody tr:last-child td {
  border-bottom: 0;
}

.sw-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.sw-table tbody td:first-child {
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}

/* --- 提示框 --- */
.sw-note {
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: rgba(255, 255, 255, 0.025);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-dim);
}

.sw-note b {
  color: var(--white);
  margin-right: 6px;
}

/* --- 問答 --- */
.sw-faq {
  display: grid;
  gap: 12px;
}

.sw-faq details {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t);
}

.sw-faq details[open] {
  border-color: var(--border-glow);
}

.sw-faq summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 64px;
}

.sw-faq summary::-webkit-details-marker {
  display: none;
}

.sw-faq summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--primary);
  line-height: 1;
}

.sw-faq details[open] summary::after {
  content: "\2013";
}

.sw-faq .ans {
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 18px;
}

/* --- 鍵值列 --- */
.sw-kv {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sw-kv-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--surface);
}

.sw-kv-row:last-child {
  border-bottom: 0;
}

.sw-kv-row b {
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
}

.sw-kv-row span {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
}

.sw-kv-row span a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 95, 0, 0.4);
  transition: var(--t);
}

.sw-kv-row span a:hover {
  border-bottom-color: var(--primary);
}

/* --- 結尾號召 --- */
.sw-cta {
  padding: 74px 0;
  background:
    radial-gradient(760px 340px at 50% 120%, rgba(255, 95, 0, 0.14), transparent 68%),
    var(--surface);
  border-top: 1px solid var(--border);
}

.sw-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.sw-cta h2 {
  font-size: clamp(22px, 2.6vw, 31px);
  line-height: 1.45;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 18px;
}

.sw-cta p {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--text-dim);
  margin: 0 0 30px;
}

.sw-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- 系統平鋪磚（首頁） -----------------------------------------------
   與 products.html 的服務磚同一概念：一格一個系統，整格可點擊。
   五個系統用 3 欄排版（首行三格、次行兩格），比 4 欄更寬鬆好讀。 */
.sw-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sw-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--t);
  overflow: hidden;
  text-decoration: none;
}

.sw-tile:hover {
  border-color: var(--border-glow);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.sw-tile-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  color: var(--primary);
}

.sw-tile-icon svg {
  width: 64px;
  height: 64px;
  color: var(--primary);
  transition: var(--t);
}

.sw-tile:hover .sw-tile-icon svg {
  filter: drop-shadow(0 0 8px var(--primary-glow));
  transform: scale(1.06);
}

.sw-tile-tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid rgba(255, 95, 0, 0.28);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.sw-tile h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}

.sw-tile p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  margin: 0 0 20px;
}

.sw-tile-more {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
}

.sw-tile-more::after {
  content: " →";
}

/* --- 響應式 --- */
@media (max-width: 1000px) {
  .sw-hero { min-height: 520px; padding: 116px 0 46px; }
  .sw-sec { padding: 60px 0; }
  .sw-facts { grid-template-columns: repeat(2, 1fr); }
  .sw-grid-3, .sw-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sw-tiles { grid-template-columns: repeat(2, 1fr); }
  .sw-flow { grid-template-columns: repeat(3, 1fr); }
  .sw-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw-split { grid-template-columns: 1fr; gap: 30px; }
  .sw-kv-row { grid-template-columns: 150px 1fr; }
}

@media (max-width: 680px) {
  .sw-wrap { padding: 0 18px; }
  .sw-hero { min-height: 560px; padding: 104px 0 40px; }
  .sw-sec { padding: 48px 0; }
  .sw-facts { grid-template-columns: 1fr; }
  .sw-grid-2, .sw-grid-3, .sw-grid-4 { grid-template-columns: 1fr; }
  .sw-tiles { grid-template-columns: 1fr; gap: 14px; }
  .sw-tile { padding: 24px 20px 22px; }
  .sw-tile-icon, .sw-tile-icon svg { width: 52px; height: 52px; }
  .sw-tile-icon { margin-bottom: 16px; }
  .sw-tile h3 { font-size: 19px; }
  .sw-flow { grid-template-columns: repeat(2, 1fr); }
  .sw-chain { grid-template-columns: 1fr; gap: 8px; }
  .sw-chain-item::after { content: none; }
  .sw-card { padding: 22px 20px; }
  .sw-step { padding: 22px 20px; }
  .sw-kv-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .sw-btn { width: 100%; }
  .sw-hero-btns { width: 100%; }
  .sw-table { font-size: 13.5px; }
  .sw-table thead th, .sw-table tbody td { padding: 12px 14px; }
  .sw-faq summary { padding: 16px 18px; padding-right: 46px; font-size: 15px; }
  .sw-faq .ans { padding: 14px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-btn, .sw-card, .sw-tile, .sw-tile-icon svg {
    transition: none;
  }
  .sw-btn-primary:hover, .sw-card:hover, .sw-tile:hover {
    transform: none;
  }
  .sw-tile:hover .sw-tile-icon svg { transform: none; }
}

/* ==========================================================================
   互動示範：模擬系統介面
   用途：首頁 hero 下方的可點擊示範，讓訪客未預約前先摸到介面手感。
   實作：純前端切換（分頁、側欄、篩選、展開列），不接任何後端，
         所有資料都是寫死在 HTML 的示範值，重新載入即還原。
   配色：只用品牌三色及其灰階，變數沿用 /css/style.css。
   ========================================================================== */

/* --- 分頁切換（五個系統）--- */
.sw-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.sw-demo-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
}

.sw-demo-tab:hover {
  color: var(--white);
  border-color: var(--border-glow);
}

.sw-demo-tab[aria-selected="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--black);
}

.sw-demo-tab svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --- 模擬視窗外框 --- */
.sw-demo {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--black);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.sw-demo-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.sw-demo-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.sw-demo-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3A3A42;
}

.sw-demo-dots i:last-child {
  background: var(--primary);
  opacity: 0.85;
}

.sw-demo-title {
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.sw-demo-badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 95, 0, 0.32);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex: none;
}

.sw-demo-body {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 470px;
}

/* --- 側欄模組 --- */
.sw-demo-side {
  background: #121216;
  border-right: 1px solid var(--border);
  padding: 16px 0 18px;
}

.sw-demo-side-h {
  padding: 0 20px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.sw-demo-nav {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 20px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: var(--t);
}

.sw-demo-nav:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.03);
}

.sw-demo-nav[aria-selected="true"] {
  background: var(--primary-soft);
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.sw-demo-side-foot {
  margin: 18px 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 95, 0, 0.35);
  background: #1C1C22;
}

.sw-demo-side-foot b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.sw-demo-side-foot span {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* --- 主工作區 --- */
.sw-demo-main {
  padding: 18px 20px 22px;
  min-width: 0;
}

.sw-demo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.sw-demo-select {
  appearance: none;
  padding: 9px 34px 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239A9AA5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: var(--t);
}

.sw-demo-select:hover,
.sw-demo-select:focus {
  border-color: var(--border-glow);
  outline: none;
}

.sw-demo-select option {
  background: var(--surface-2);
  color: var(--text);
}

.sw-demo-search {
  flex: 1 1 180px;
  min-width: 150px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.sw-demo-search::placeholder {
  color: var(--text-faint);
}

.sw-demo-search:focus {
  border-color: var(--border-glow);
  outline: none;
}

.sw-demo-act {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t);
}

.sw-demo-act:hover {
  color: var(--white);
  border-color: var(--border-glow);
}

/* --- 面板切換 ---
   五個系統的面板疊在同一個視窗內，只有當前一個顯示。
   .sw-demo-panel[hidden] 要用 display:none 覆寫，否則會被 flex/grid 規則
   重新顯示出來；未載入 JS 時只有第一個面板沒有 hidden，內容仍可讀。 */
.sw-demo-panel[hidden] {
  display: none;
}

/* --- 表格 ---
   表格區可獨立捲動，模擬真實系統的資料區；展開明細時不會把整個視窗推長。 */
.sw-demo-scroll {
  position: relative;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}

/* 表頭在捲動時固定，貼近真實系統觀感 */
.sw-demo-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 捲軸只用品牌灰階，避免瀏覽器預設色破壞配色 */
.sw-demo-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sw-demo-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sw-demo-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.sw-demo-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 95, 0, 0.55);
}

.sw-demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}

.sw-demo-table thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: #16161A;
  border-bottom: 1px solid var(--border);
}

.sw-demo-table tbody td {
  padding: 13px 14px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sw-demo-table tbody tr:last-child td {
  border-bottom: 0;
}

.sw-demo-row {
  cursor: pointer;
  transition: background var(--t);
}

.sw-demo-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

.sw-demo-row[aria-expanded="true"] {
  background: rgba(255, 95, 0, 0.07);
}

.sw-demo-table td:first-child {
  color: var(--text);
  font-weight: 600;
}

/* 展開列的明細 */
.sw-demo-detail td {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sw-demo-detail-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
  padding: 18px 20px 20px;
  background: rgba(255, 95, 0, 0.045);
  border-left: 3px solid var(--primary);
}

.sw-demo-detail-in div {
  min-width: 0;
}

.sw-demo-detail-in dt {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.sw-demo-detail-in dd {
  font-size: 13.5px;
  color: var(--text);
}

/* --- 狀態標籤 --- */
.sw-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sw-pill-ok {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.sw-pill-warn {
  background: var(--primary-soft);
  border-color: rgba(255, 95, 0, 0.35);
  color: var(--primary);
}

.sw-pill-off {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
  color: var(--text-faint);
}

/* --- 迷你長條圖（示範用，靜態）--- */
.sw-demo-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 92px;
  padding: 14px 16px 0;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}

.sw-demo-chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, 0.10);
  transition: var(--t);
}

.sw-demo-chart i.hot {
  background: var(--primary);
}

.sw-demo-hint {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.8;
}

.sw-demo-hint b {
  color: var(--primary);
  font-weight: 700;
}

/* --- 示範提示條 ---
   由 software-demo.js 在首次互動時才建立，故未啟用 JS 的訪客完全看不到。
   定位以 .sw-demo 為基準，令提示不推走版面內容。 */
.sw-demo {
  position: relative;
}

.sw-demo-toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 95, 0, 0.4);
  background: #0A0A0C;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: var(--t);
  pointer-events: none;
}

.sw-demo-toast.is-on {
  opacity: 1;
  transform: none;
}

/* --- 篩選後無結果 --- */
.sw-demo-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

/* --- 響應式 --- */
@media (max-width: 1000px) {
  .sw-demo-body { grid-template-columns: 160px 1fr; }
  .sw-demo-detail-in { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .sw-demo-tabs { gap: 8px; }
  .sw-demo-tab { padding: 9px 15px; font-size: 13.5px; }
  .sw-demo-body { grid-template-columns: 1fr; min-height: 0; }
  .sw-demo-side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 0 14px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .sw-demo-side-h,
  .sw-demo-side-foot { display: none; }
  .sw-demo-nav {
    display: inline-block;
    width: auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 9px 14px;
  }
  .sw-demo-nav[aria-selected="true"] {
    border-left-color: transparent;
    border-bottom-color: var(--primary);
  }
  .sw-demo-main { padding: 14px 14px 18px; }
  .sw-demo-act { margin-left: 0; }
  .sw-demo-detail-in { grid-template-columns: 1fr; }
  .sw-demo-chart { height: 74px; }
  /* 窄螢幕：表格改為橫向捲動，避免擠壓至不可讀 */
  .sw-demo-scroll { max-height: 360px; }
  .sw-demo-table { min-width: 520px; }
  .sw-demo-title { font-size: 11.5px; }
  .sw-demo-badge { display: none; }
  .sw-demo-toast { left: 10px; right: 10px; bottom: 10px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-demo-tab,
  .sw-demo-nav,
  .sw-demo-row,
  .sw-demo-act,
  .sw-demo-toast,
  .sw-demo-chart i {
    transition: none;
  }
}