/* ═══════════════════════════════════════════
   機型比較頁樣式
   ═══════════════════════════════════════════ */
body{min-height:100vh}

.cmp-topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:20px;
  padding:16px 24px;
  background:var(--bg-1);
  border-bottom:1px solid var(--stroke);
}
.cmp-topbar .back{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .15s;
}
.cmp-topbar .back:hover{color:var(--amber)}
.cmp-title{flex:1}
.cmp-title .eyebrow{font-size:10px}
.cmp-title h1{font-size:20px;font-weight:700;letter-spacing:.03em;margin-top:4px}

.cmp-pickers{
  display:flex;gap:12px;flex-wrap:wrap;
  padding:20px 24px;
  border-bottom:1px solid var(--stroke);
}
.cmp-pickers select{
  font-family:var(--sans);font-size:14px;
  color:var(--text);background:var(--panel);
  border:1px solid var(--stroke);border-radius:8px;
  padding:9px 12px;min-width:180px;
}
.cmp-pickers select:focus{outline:none;border-color:var(--amber)}
.cmp-add{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--text);background:transparent;
  border:1px dashed var(--stroke);border-radius:8px;
  padding:9px 16px;cursor:pointer;transition:all .15s;
}
.cmp-add:hover{border-color:var(--amber);color:var(--amber)}

.cmp-table-wrap{padding:24px;overflow-x:auto}
.cmp-empty{color:var(--muted);font-size:15px;padding:40px 0;text-align:center}

.cmp-table{border-collapse:collapse;width:100%;min-width:max-content}
.cmp-table th, .cmp-table td{
  padding:12px 18px;text-align:left;
  border-bottom:1px solid var(--stroke);
  font-size:13px;vertical-align:top;
}
.cmp-table thead th{
  position:sticky;top:0;
  background:var(--bg-1);
  border-bottom:2px solid var(--stroke);
  min-width:200px;
}
.cmp-table thead .craft-head{padding-bottom:14px}
.cmp-table thead .thumb{
  width:100%;max-width:220px;height:auto;
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:8px;margin-bottom:10px;
}
.cmp-table thead h2{font-size:17px;font-weight:700;letter-spacing:.02em}
.cmp-table thead .mfr{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--cyan);margin-top:4px;
}
.cmp-table thead .remove{
  margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--muted);background:transparent;
  border:1px solid var(--stroke);border-radius:5px;
  padding:4px 10px;cursor:pointer;transition:all .15s;
}
.cmp-table thead .remove:hover{color:#ff7850;border-color:#ff7850}
.cmp-table thead .view-link{
  display:inline-block;margin-top:8px;margin-left:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--muted);text-decoration:none;
  border:1px solid var(--stroke);border-radius:5px;padding:4px 10px;
  transition:all .15s;
}
.cmp-table thead .view-link:hover{color:var(--amber);border-color:var(--amber)}

.cmp-table .cat-row td{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  color:var(--amber);
  background:var(--amber-soft);
  padding:10px 18px;
}
.cmp-table .label-cell{
  color:var(--muted);white-space:nowrap;
  font-weight:500;
  position:sticky;left:0;background:var(--bg-0);
}
.cmp-table td.val{font-family:var(--mono);letter-spacing:.02em;color:var(--text)}
.cmp-table td.val.diff{color:var(--amber)}
.cmp-table td.na{color:var(--muted);opacity:.5}

@media (max-width:640px){
  .cmp-topbar{flex-wrap:wrap;gap:10px}
  .cmp-table thead th{min-width:150px}
}