/* Alert Settings — token-based, light + dark */
.as-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }

.as-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin: 0 0 var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.as-card h2 { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-xs); color: var(--text-primary); }
.as-card-sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-lg); }

.as-signin { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.as-signin-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.as-signin a, .as-card a.as-link { color: var(--text-accent); font-weight: 600; text-decoration: none; }

/* Add-keyword search */
.as-kw-search-row { display: flex; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.as-kw-search {
  flex: 1; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); background: var(--bg-input); color: var(--text-primary);
}
.as-kw-search:focus { outline: none; border-color: var(--border-focus); }
.as-suggest {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin: -4px 0 var(--space-md); max-height: 220px; overflow: auto; background: var(--bg-card);
}
.as-sug { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-primary); }
.as-sug:last-child { border-bottom: none; }
.as-sug:hover { background: var(--bg-hover); }
.as-sug .am { color: var(--text-faint); margin-left: 6px; }
.as-sug-empty { padding: 9px 12px; color: var(--text-faint); font-size: var(--text-sm); }

/* Keyword chip cloud */
.as-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.as-chip {
  position: relative;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 32px 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); transition: border-color .15s, box-shadow .15s;
}
.as-chip:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.as-chip-en { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.as-chip-am { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.2; }
.as-chip-del {
  position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.as-chip-del:hover { background: var(--bg-hover); color: var(--error); }
.as-chips-empty { font-size: var(--text-sm); color: var(--text-faint); padding: var(--space-sm) 0; }

/* Form controls */
.as-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font-size: var(--text-sm); }
.as-check-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); margin: 0 0 10px; cursor: pointer; color: var(--text-primary); }
.as-tg-box { display: none; margin: var(--space-sm) 0 0; padding: 12px 14px; background: var(--bg-card-body); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); }
.as-tg-link { display: none; color: var(--text-accent); font-weight: 600; text-decoration: none; }
.as-tg-disconnect { display: none; background: none; border: none; color: var(--error); cursor: pointer; font-weight: 600; padding: 0; }
.as-link-visible { display: inline; color: var(--text-accent); font-weight: 600; text-decoration: none; }

/* Save row */
.as-save-row { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.as-save-status { color: var(--accent); font-size: var(--text-sm); }
.as-save-btn { padding: 11px 24px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.as-save-btn:hover { background: var(--primary-hover); }

/* Dark-mode surface fallbacks */
body.dark-mode .as-chip { background: var(--bg-card); border-color: var(--border); }
body.dark-mode .as-chip:hover { border-color: var(--border-hover); box-shadow: none; }
body.dark-mode .as-suggest, body.dark-mode .as-tg-box { background: var(--bg-card); border-color: var(--border); }