/* TAG reverse + watchlist tabs unified v3: PC/Mobile shared UI + mobile chip alignment */
.tag-watch-clickable {
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.tag-watch-clickable:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgba(56,189,248,.35), 0 4px 14px rgba(14,165,233,.18);
}
.tag-watch-clickable::after {
  content: "↗";
  margin-left: 4px;
  opacity: .85;
  font-size: .9em;
}
.tag-watch-shortcut,
.watch-tabs-shortcut {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tag-watch-shortcut { margin-left: 0; }
.stock-picker-card .tag-watch-shortcut,
.stock-picker-card .watch-tabs-shortcut { margin-top: 8px; }
.tag-watch-shortcut button,
.watch-tabs-shortcut button,
.tag-watch-mini-btn {
  border: 1px solid rgba(56,189,248,.42);
  background: rgba(56,189,248,.10);
  color: #bae6fd;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.tag-watch-shortcut button:hover,
.watch-tabs-shortcut button:hover,
.tag-watch-mini-btn:hover { background: rgba(56,189,248,.18); }
.tag-watch-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 99999;
  padding: 18px;
  overflow-y: auto;
}
.tag-watch-modal-backdrop.show { display: block; }
.tag-watch-modal {
  width: min(1080px, calc(100vw - 28px));
  margin: 4vh auto;
  background: linear-gradient(160deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.52);
  color: #e5e7eb;
  overflow: hidden;
}
.tag-watch-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.tag-watch-modal-title { font-size: 18px; font-weight: 900; color: #f8fafc; }
.tag-watch-modal-sub { color: #94a3b8; font-size: 12px; margin-top: 4px; }
.tag-watch-close {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.42);
  color: #e5e7eb;
  font-size: 22px;
  line-height: 1;
}
.tag-watch-modal-body { padding: 14px 16px 18px; }
.tag-watch-empty {
  border: 1px dashed rgba(148,163,184,.26);
  border-radius: 14px;
  padding: 16px;
  color: #cbd5e1;
  background: rgba(2,6,23,.25);
  line-height: 1.6;
}
.tag-watch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tag-watch-actions button,
.tag-watch-table button,
.tag-watch-tab-row button {
  border: 1px solid rgba(56,189,248,.42);
  background: rgba(56,189,248,.12);
  color: #bae6fd;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}
.tag-watch-actions button.warn { border-color: rgba(250,204,21,.45); background: rgba(250,204,21,.12); color: #fde68a; }
.tag-watch-table-wrap { overflow-x: auto; border: 1px solid rgba(148,163,184,.16); border-radius: 14px; }
.tag-watch-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.tag-watch-table th,
.tag-watch-table td { padding: 9px 10px; border-bottom: 1px solid rgba(148,163,184,.13); white-space: nowrap; }
.tag-watch-table th { position: sticky; top: 0; background: #0f172a; color: #93c5fd; z-index: 1; }
.tag-watch-table tr:last-child td { border-bottom: 0; }
.tag-watch-rank { color: #facc15; font-weight: 900; }
.tag-watch-stock { font-weight: 900; color: #f8fafc; }
.tag-watch-tagpill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; background: rgba(56,189,248,.13); border: 1px solid rgba(56,189,248,.32); color: #bae6fd; font-weight: 800; }
.tag-watch-checkboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tag-watch-checkboxes label,
.tag-watch-tab-row {
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.28);
  border-radius: 14px;
  padding: 10px;
}
.tag-watch-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tag-watch-tab-row input[type="text"] {
  width: 100%;
  border: 1px solid rgba(56,189,248,.34);
  border-radius: 10px;
  background: rgba(2,6,23,.55);
  color: #e5e7eb;
  padding: 7px 9px;
  font-weight: 800;
}
.tag-watch-chip-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: #dbeafe; }
.tag-watch-remove { color: #fecaca!important; border-color: rgba(248,113,113,.45)!important; background: rgba(248,113,113,.10)!important; }
.tag-watch-source-link { color: #7dd3fc; text-decoration: underline; font-weight: 800; }


/* mobileUI 籌碼頁對齊 v3：比照其它頁面，籌碼頁一律同寬單欄，避免下半部 card/grid 撐出 app-shell */
html, body { max-width: 100%; overflow-x: hidden; }
body:has(.app-shell) { overflow-x: hidden !important; }
.app-shell,
.app-shell * { box-sizing: border-box !important; }
.app-shell {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}
.app-shell .app-content,
.app-shell .page-section,
.app-shell #chip,
.app-shell #chip .section-guide,
.app-shell #chip .chip-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
}
.app-shell #chip.page-section.active { display: block !important; }
.app-shell #chip .chip-grid,
.app-shell #chip .chip-grid[style] {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.app-shell #chip .chip-grid > .card-panel,
.app-shell #chip .card-panel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 0 0 !important;
  float: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
.app-shell #chip .mini-grid,
.app-shell #chip .metric,
.app-shell #chip .table-wrap,
.app-shell #chip #mainForceBox {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.app-shell #chip .mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.app-shell #chip .metric,
.app-shell #chip .metric * {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.app-shell #chip .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.app-shell #chip .mobile-table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}
.app-shell #chip .tag-container,
.app-shell #chip .feature-tag {
  max-width: 100% !important;
}
@media (min-width: 680px) {
  .app-shell #chip .chip-grid,
  .app-shell #chip .chip-grid[style] {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
}
@media (max-width: 420px) {
  .app-shell #chip .mini-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .tag-watch-checkboxes,
  .tag-watch-tabs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .tag-watch-modal-backdrop { padding: 10px; }
  .tag-watch-modal { width: calc(100vw - 20px); margin: 2vh auto; border-radius: 16px; }
  .tag-watch-table { min-width: 760px; font-size: 12px; }
  .tag-watch-modal-header,
  .tag-watch-modal-body { padding-left: 12px; padding-right: 12px; }
}

/* v4: 功能說明 / 智慧重建狀態 */
.tag-watch-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tag-watch-guide-card { border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.30); border-radius: 14px; padding: 12px; }
.tag-watch-guide-card h4 { margin: 0 0 8px; font-size: 15px; color: #bae6fd; }
.tag-watch-guide-card ul { margin: 0; padding-left: 18px; color: #cbd5e1; line-height: 1.65; }
.tag-watch-status-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.tag-watch-status-cell { border:1px solid rgba(148,163,184,.18); border-radius:12px; padding:10px; background:rgba(15,23,42,.55); }
.tag-watch-status-cell small { display:block; color:#94a3b8; }
.tag-watch-status-cell strong { display:block; color:#f8fafc; margin-top:3px; }
.tag-watch-actions button.primary { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); color:#bbf7d0; }

/* v4: mobile 籌碼頁再加硬限制，避免任何 bootstrap row/gutter 或 inline style 撐爆 */
@media (max-width: 680px) {
  html, body, .app-shell { width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
  .app-shell .app-header,
  .app-shell .app-content { width:100% !important; max-width:100% !important; padding-left:12px !important; padding-right:12px !important; overflow-x:hidden !important; }
  .app-shell #chip,
  .app-shell #chip * { box-sizing:border-box !important; }
  .app-shell #chip .chip-grid { display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; gap:12px !important; overflow-x:hidden !important; }
  .app-shell #chip .chip-grid > .card-panel { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:12px !important; overflow:hidden !important; }
  .app-shell #chip .mini-grid { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; width:100% !important; gap:8px !important; overflow:hidden !important; }
  .app-shell #chip .metric { width:100% !important; min-width:0 !important; max-width:100% !important; overflow:hidden !important; }
  .app-shell #chip .metric small,
  .app-shell #chip .metric strong { max-width:100% !important; overflow-wrap:anywhere !important; word-break:break-word !important; white-space:normal !important; }
  .app-shell #chip #mainForceBox,
  .app-shell #chip #mainForceBox * { max-width:100% !important; min-width:0 !important; overflow-wrap:anywhere !important; }
  .app-shell #chip .table-wrap { width:100% !important; max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; }
  .app-shell #chip .mobile-table { min-width:420px !important; width:max-content !important; }
  .tag-watch-guide-grid, .tag-watch-status-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 390px) {
  .app-shell #chip .mini-grid { grid-template-columns:minmax(0,1fr) !important; }
}