/* ============================================================
   FS25 Portal — Admin console
   Depends on: 01-tokens.css, 02-base.css, 03-layout.css,
               04-components.css
   ------------------------------------------------------------
   The operator's console: dense, instrument-like, information-
   first. Panels, buttons, forms, tables, badges, avatars, the
   XP bar and modals are already handled by 04-components.css —
   this file only adds the admin-specific layout and detail work
   on top of that shared system.

   Templates covered: admin.ejs, admin-post.ejs, admin-user.ejs,
   admin-settings.ejs, admin-changelog-builder.ejs,
   admin-roadmap-builder.ejs.
   ============================================================ */

/* ============================================================
   Stat cards (admin.ejs dashboard)
   ------------------------------------------------------------
   .stat-card already gets the shared panel treatment (surface,
   border, radius, edge light) from 04-components.css — only the
   internal layout and the numerals belong here.
   ============================================================ */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--amber);
  background: var(--amber-soft);
  border: var(--hairline) solid var(--amber-line);
  border-radius:var(--r);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* .stat-label already styled by the micro-label group in 02-base.css */

/* Mini stat strip on the user detail card */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  text-align: center;
}

.stat-mini .stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Quick actions
   ============================================================ */

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r);
  box-shadow: var(--edge-light);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.quick-action svg { opacity: 0.75; transition: opacity var(--t) var(--ease); }

.quick-action:hover {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}
.quick-action:hover svg { opacity: 1; }

/* ============================================================
   Admin tabs
   ------------------------------------------------------------
   An underline selector on a tramline base, echoing the primary
   nav's "active station" treatment rather than a pill segment.
   ============================================================ */

.admin-tabs {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.admin-tab {
  position: relative;
  padding: var(--s3) var(--s4);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  transition: color var(--t) var(--ease);
}

.admin-tab:hover { color: var(--text); }

.admin-tab.active { color: var(--amber); }
.admin-tab.active::after {
  content: '';
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: -1px;
  height: 2px;
  background: var(--amber);
}

.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* ============================================================
   Admin toolbar + bulk actions
   ============================================================ */

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.toolbar-right,
.post-count,
.entry-count,
.builder-info {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--amber-soft);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
}

.bulk-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--amber);
}

/* ============================================================
   Posts table specifics
   ============================================================ */

.post-checkbox { cursor: pointer; }

.post-title-cell {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}

.post-title-cell a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pin-icon { color: var(--amber); flex-shrink: 0; }

/* Role plate — reuses the status-badge stamped-plate language for
   a value that isn't a workflow state. */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r-sm);
}

.role-badge.superadmin { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.role-badge.admin      { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.role-badge.user       { color: var(--text-faint); }

.role-form { display: inline-flex; align-items: center; gap: var(--s2); }

.user-cell { display: flex; align-items: center; gap: var(--s3); }

.user-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.user-username {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.online-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.online-indicator.online { color: var(--green); }

/* ============================================================
   Post editor
   ============================================================ */

.editor-form {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
  padding: var(--s2);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-bottom: 0;
  border-radius:var(--r) var(--r) 0 0;
}

.editor-toolbar + textarea,
.editor-toolbar + .form-textarea {
  border-radius:0 0 var(--r) var(--r);
}

.attachment-preview-existing { margin-bottom: var(--s3); }

/* ============================================================
   Changelog builder
   ============================================================ */

.changelog-builder {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r-lg);
  box-shadow: var(--edge-light);
  overflow: hidden;
}

.builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.builder-filters {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}

.changelog-preview { padding: var(--s5); }

.builder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.builder-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.builder-card-actions { display: flex; align-items: center; gap: var(--s2); }

/* The admin preview reuses the public changelog-timeline component;
   only the offset used inside the builder panel belongs here. */
.changelog-timeline.admin { padding-left: var(--s7); }
.changelog-timeline.admin::before { left: var(--s3); }

/* ============================================================
   Roadmap builder — kanban board
   ------------------------------------------------------------
   Three columns as a progression, not three unrelated buckets:
   dormant steel -> active amber -> harvested green, reinforced
   with a top edge in the matching state colour and a small
   connecting chevron between columns.
   ============================================================ */

.kanban-board {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding: var(--s2) 0 var(--s5);
  overflow-x: auto;
}

.kanban-column {
  position: relative;
  flex: 1 1 0;
  min-width: 300px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r-lg);
  box-shadow: var(--edge-light);
}

/* Directional connector between columns — neutral, not a state
   colour, so it reads as sequence rather than another signal. */
.kanban-column + .kanban-column::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--s5) / -2 - 4px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--border-strong);
  border-right: 2px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-top: 3px solid var(--border-strong);
}

.kanban-column-header.planned  { border-top-color: var(--state-planned);  color: var(--steel); background: var(--steel-soft); }
.kanban-column-header.progress { border-top-color: var(--state-progress); color: var(--amber); background: var(--amber-soft); }
.kanban-column-header.done     { border-top-color: var(--state-done);    color: var(--green); background: var(--green-soft); }

.column-title { display: flex; align-items: center; gap: var(--s2); }
.column-title h3 { font-size: var(--fs-base); }

.kanban-column-header .count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  padding: 1px var(--s2);
  border-radius:var(--r-sm);
  background: var(--bg-sunk);
  color: var(--text);
}

.kanban-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3);
  min-height: 160px;
  overflow-y: auto;
  transition: background var(--t) var(--ease);
}

.kanban-cards.drag-over { background: var(--amber-soft); }

.kanban-card {
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r);
  padding: var(--s3) var(--s4);
  cursor: grab;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
}

.kanban-card:hover { border-color: var(--amber-line); box-shadow: var(--shadow-sm); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }

.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.kanban-card-actions { display: flex; align-items: center; gap: 2px; }

.kanban-edit,
.kanban-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius:var(--r-sm);
  color: var(--text-faint);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.kanban-edit:hover { background: var(--surface-3); color: var(--amber); }
.kanban-delete:hover { background: var(--red-soft); color: var(--red); }

.kanban-card-title { margin-bottom: var(--s2); font-size: var(--fs-base); }

.kanban-card-content {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-dim);
  margin-bottom: var(--s3);
}

.kanban-card-content.compact {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: var(--hairline) solid var(--border-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Admin settings
   ============================================================ */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--s5);
}

.settings-card.full-width { grid-column: 1 / -1; }

.settings-form {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.discord-section {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}

.discord-section h3 {
  margin-bottom: var(--s3);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
}

.system-info { padding: var(--s5); }

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: var(--hairline) solid var(--border-faint);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

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

.info-row span:last-child {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.status-active { color: var(--green); }
.status-inactive { color: var(--text-faint); }

/* ============================================================
   User admin grid
   ============================================================ */

.user-admin-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: var(--s5);
  align-items: start;
}

.profile-avatar-wrapper { position: relative; flex-shrink: 0; }

.profile-avatar,
.profile-avatar-img {
  width: 80px;
  height: 80px;
  border-radius:var(--r-lg);
  border: var(--hairline) solid var(--border-strong);
  object-fit: cover;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--bg);
  background: var(--amber);
}

.profile-admin-info .profile-username {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin-bottom: var(--s2);
}

/* Level & XP block
   ------------------------------------------------------------
   .level-badge is already a small stamped status pill elsewhere
   in 04-components.css. Inside the level header it plays a
   different role — a big circular XP gauge — so it is overridden
   here through a scoped, more specific selector rather than by
   redefining the bare class. */

.level-section {
  padding: var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.level-header {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.level-header .level-badge {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius:var(--r-lg);
  background: linear-gradient(135deg, var(--amber-dim), var(--amber));
  color: var(--bg);
}

.level-header .level-number {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.level-header .level-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  opacity: 0.85;
}

.level-details { flex: 1; min-width: 0; }

.level-details .xp-text {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s2);
}

.admin-form {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.ban-banner {
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--text-faint);
  border-radius:0 var(--r) var(--r) 0;
}

.ban-banner.danger {
  color: var(--red);
  border-left-color: var(--red);
  background: var(--red-soft);
}

/* Legacy on/off pill toggle (notifications row) — distinct from
   the shared slider .toggle-switch component. */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  border: var(--hairline) solid var(--border-strong);
  border-radius:var(--r-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.toggle-btn.on  { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.toggle-btn.off { color: var(--text-faint); }

/* ============================================================
   Perks
   ============================================================ */

.perks-panel { padding: var(--s5); }

.perks-hint {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 2px 0 var(--s4);
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}

.perk-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius:var(--r);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.perk-card:hover { border-color: var(--border-strong); }
.perk-card.active { border-color: var(--amber-line); background: var(--amber-soft); }
.perk-card.auto { opacity: 0.65; }

.perk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-size: var(--fs-md);
  border-radius:var(--r);
  background: var(--surface-3);
}

.perk-info { flex: 1; min-width: 0; }
.perk-info h4 { margin-bottom: 2px; }
.perk-info p { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--s1); }

.perk-level {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

.perk-actions { flex-shrink: 0; }

/* Compact perk list variant (profile perks summary) */
.perks-list { display: flex; flex-direction: column; gap: var(--s2); }

.perk-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--border-strong);
  border-radius:0 var(--r) var(--r) 0;
}

.perk-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.perk-desc { font-size: var(--fs-xs); color: var(--text-faint); }

/* ============================================================
   XP history
   ============================================================ */

.xp-history { padding: var(--s5); }
.xp-history h3 { margin-bottom: var(--s4); }

/* ============================================================
   Activity log
   ------------------------------------------------------------
   A machine log: mono throughout, tight leading, the timestamp
   and IP subordinate to the action so it scans at a glance.
   ============================================================ */

.activity-log {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.activity-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--border-strong);
  border-radius:0 var(--r) var(--r) 0;
  font-family: var(--font-mono);
}

.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius:var(--r);
  background: var(--surface-3);
  color: var(--text-faint);
}

.activity-icon[class*="-login"] { color: var(--steel); background: var(--steel-soft); }
.activity-icon[class*="-post"]  { color: var(--amber); background: var(--amber-soft); }
.activity-icon[class*="-role"],
.activity-icon[class*="-ban"]   { color: var(--red); background: var(--red-soft); }

.activity-body { flex: 1; min-width: 0; }

.activity-body p {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-dim);
}

.activity-body strong { color: var(--text); font-weight: 600; }
.activity-action { color: var(--amber); margin: 0 var(--s1); }
.activity-details { color: var(--text-faint); }

.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: 2px;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

/* ============================================================
   Responsive — co-located
   ============================================================ */

@media (max-width: 1024px) {
  .user-admin-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .kanban-board { flex-direction: column; align-items: stretch; }
  .kanban-column { max-width: none; min-width: 0; }
  .kanban-column + .kanban-column::before { display: none; }
  .admin-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .admin-stats { grid-template-columns: 1fr; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-direction: column; align-items: stretch; }
  .level-header { flex-direction: column; align-items: flex-start; }
  .admin-stats-row { grid-template-columns: repeat(2, 1fr); padding: var(--s4); }
  .builder-toolbar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Gap fill
   ============================================================ */

/* Stat icon tints — four metrics, four readings, so each console
   gauge is distinguishable at a glance rather than four identical
   amber squares. */
.stat-icon.posts    { color: var(--amber); background: var(--amber-soft); }
.stat-icon.users    { color: var(--steel); background: var(--steel-soft); }
.stat-icon.comments { color: var(--green); background: var(--green-soft); }
.stat-icon.views    { color: var(--text-dim); background: var(--surface-2); }

/* Audit trail: timestamp and origin are subordinate machine data. */
.activity-time,
.activity-ip {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}

.activity-ip {
  padding: 0 var(--s1);
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border-faint);
  border-radius: var(--r-sm);
}

.profile-admin-card { overflow: hidden; }

.roadmap-builder { display: flex; flex-direction: column; gap: var(--s5); }

.role-apply-btn:disabled { opacity: 0.4; }

/* Code input textarea for ad codes / embed snippets */
.code-input {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  min-height: 80px;
  resize: vertical;
  tab-size: 2;
  background: var(--bg-sunk);
  color: var(--text-dim);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  width: 100%;
  transition: border-color var(--t) var(--ease);
}
.code-input:focus {
  border-color: var(--amber-line);
  outline: none;
  color: var(--text);
}

/* Row for aligned action buttons in settings forms */
.form-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border-faint);
}

/* Settings note panel */
.settings-note a {
  color: var(--amber);
  text-decoration: underline;
}
.settings-note a:hover {
  color: var(--amber-bright);
}