/* ============================================================
   ENTITY MANAGERS — chatters, models, tables, modals, forms
   ============================================================ */

/* Page action header */
.page-actions{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.btn-add{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: var(--r-sm);
  box-shadow: 0 8px 22px -8px rgba(236,30,121,0.5);
  transition: filter .15s, transform .1s;
}
.btn-add:hover{ filter: brightness(1.08); }
.btn-add:active{ transform: translateY(1px); }
.btn-add svg{ width: 17px; height: 17px; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:7px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line-2); font-weight: 500; font-size: 13.5px;
  padding: 9px 15px; border-radius: var(--r-sm);
  transition: background .14s, color .14s, border-color .14s;
}
.btn-ghost:hover{ background: var(--surface-3); color: var(--text); }
.btn-ghost svg{ width: 15px; height: 15px; }
.btn-ghost.danger-btn{ color: var(--bad); }
.btn-ghost.danger-btn:hover{ background: var(--bad-dim); color: var(--bad); border-color: rgba(255,90,106,0.3); }

/* Filter tabs */
.filter-tabs{ display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.filter-tab{
  padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  color: var(--text-3); transition: background .14s, color .14s;
}
.filter-tab:hover{ color: var(--text-2); }
.filter-tab.active{ background: var(--surface-3); color: var(--text); }
.filter-tab .cnt{ opacity: 0.6; font-size: 12px; margin-left: 5px; }

/* ---------- DATA TABLE ---------- */
.table-card{
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dtable{ width: 100%; border-collapse: collapse; }
.dtable thead th{
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-4);
  padding: 15px 20px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.dtable tbody td{
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--text-2); vertical-align: middle;
}
.dtable tbody tr{ transition: background .12s; }
.dtable tbody tr:hover{ background: rgba(255,255,255,0.02); }
.dtable tbody tr:last-child td{ border-bottom: none; }
.dtable .name-cell{ font-weight: 600; color: var(--text); }
.dtable .name-cell .sub{ font-weight: 400; font-size: 12px; color: var(--text-4); margin-top: 2px; }
.dtable .num{ font-family: var(--display); font-weight: 500; }

/* Badges + chips */
.badge-plat{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
}
.badge-plat .d{ width:7px; height:7px; border-radius:50%; }
.badge-plat.of{ background: rgba(79,159,255,0.13); color: var(--onlyfans-2); }
.badge-plat.of .d{ background: var(--onlyfans); }
.badge-plat.fv{ background: rgba(47,208,138,0.13); color: var(--fanvue-2); }
.badge-plat.fv .d{ background: var(--fanvue); }

.tag{
  display:inline-block; font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 7px; background: var(--surface-3);
  color: var(--text-2); margin: 2px 3px 2px 0;
}
.tag.paid{ background: rgba(55,217,150,0.13); color: var(--good); }
.tag.free{ background: rgba(242,179,56,0.13); color: var(--warn); }
.chips{ display: flex; flex-wrap: wrap; gap: 3px; max-width: 260px; }
.chip-model{
  font-size: 11.5px; padding: 3px 9px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-2);
}
.chip-more{ font-size: 11.5px; color: var(--text-4); padding: 3px 4px; }

/* Status pill */
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px;
}
.status-pill .d{ width:6px; height:6px; border-radius:50%; }
.status-good{ background: var(--good-dim); color: var(--good); } .status-good .d{ background: var(--good); }
.status-mid{ background: rgba(122,122,138,0.15); color: var(--text-2); } .status-mid .d{ background: var(--text-3); }
.status-needs_attention{ background: var(--warn-dim); color: var(--warn); } .status-needs_attention .d{ background: var(--warn); }
.status-remove{ background: var(--bad-dim); color: var(--bad); } .status-remove .d{ background: var(--bad); }
.status-insufficient_data{ background: var(--surface-3); color: var(--text-4); } .status-insufficient_data .d{ background: var(--text-4); }

/* Fired / inactive chatter ghost fade */
.dtable tbody tr.row-inactive{ opacity: 0.42; }
.dtable tbody tr.row-inactive:hover{ opacity: 0.7; background: rgba(255,255,255,0.015); }
.fired-tag{
  display:inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 6px;
  background: var(--bad-dim); color: var(--bad); vertical-align: middle; margin-left: 6px;
}
.fired-note{
  display:flex; align-items:center; gap: 9px;
  margin-top: 16px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-3);
}
.fired-note svg{ width: 15px; height: 15px; flex-shrink:0; color: var(--text-4); }

/* Row actions */
.row-actions{ display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn{
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-3);
  background: transparent; transition: background .14s, color .14s;
}
.icon-btn:hover{ background: var(--surface-3); color: var(--text); }
.icon-btn.danger:hover{ background: var(--bad-dim); color: var(--bad); }
.icon-btn svg{ width: 16px; height: 16px; }

/* ---------- MODAL ---------- */
.modal-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3,3,6,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; animation: fadeIn .16s forwards;
}
@keyframes fadeIn{ to{ opacity: 1; } }
.modal{
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow), var(--shadow-glow);
  transform: translateY(8px) scale(.99); animation: popIn .18s forwards;
}
@keyframes popIn{ to{ transform: translateY(0) scale(1); } }
.modal-head{
  display:flex; align-items:center; justify-content: space-between;
  padding: 22px 26px 16px; border-bottom: 1px solid var(--line);
}
.modal-title{ font-family: var(--display); font-weight: 600; font-size: 19px; }
.modal-close{ color: var(--text-3); padding: 6px; border-radius: 8px; transition: background .14s, color .14s; }
.modal-close:hover{ background: var(--surface-3); color: var(--text); }
.modal-close svg{ width: 20px; height: 20px; }
.modal-body{ padding: 22px 26px; }
.modal-foot{
  display:flex; gap: 12px; justify-content: flex-end;
  padding: 16px 26px 22px; border-top: 1px solid var(--line);
}

/* Forms */
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group{ margin-bottom: 16px; }
.form-group label{
  display:block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}
.form-group input, .form-group select, .form-group textarea{
  width: 100%; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 14px; color: var(--text);
  font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,30,121,0.13);
}
.form-group textarea{ resize: vertical; min-height: 72px; }
.form-hint{ font-size: 11.5px; color: var(--text-4); margin-top: 6px; }
.input-suffix{ position: relative; }
.input-suffix .suffix{ position:absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-4); font-size: 13px; pointer-events:none; }

/* Multi-select model picker */
.model-picker{
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); max-height: 180px; overflow-y: auto; padding: 6px;
}
.model-opt{
  display:flex; align-items:center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; cursor: pointer; transition: background .12s;
}
.model-opt:hover{ background: var(--surface-2); }
.model-opt input{ width: auto; accent-color: var(--pink); }
.model-opt .mo-name{ font-size: 13.5px; color: var(--text); }
.model-opt .mo-meta{ font-size: 11px; color: var(--text-4); margin-left: auto; }
.picker-empty{ padding: 14px; text-align:center; font-size: 12.5px; color: var(--text-4); }

/* ---------- EXPECTED VS ACTUAL CARD ---------- */
.eva-card{
  background: linear-gradient(120deg, rgba(236,30,121,0.06), rgba(79,159,255,0.05) 60%, rgba(47,208,138,0.05));
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 16px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
}
.eva-label{
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.eva-perf-big{
  font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; line-height: 1;
}
.eva-perf-big span{ font-size: 15px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.eva-perf-big.up{ color: var(--good); }
.eva-perf-big.warn{ color: var(--warn); }
.eva-perf-big.down{ color: var(--bad); }
.eva-perf-big.flat{ color: var(--text-2); }
.eva-sub{ display:flex; align-items:center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--text-3); flex-wrap:wrap; }
.eva-sub b{ color: var(--text); font-weight: 600; font-family: var(--display); }
.eva-sub .dot-sep{ color: var(--text-4); }
.eva-gap{ font-family: var(--display); font-weight: 600; padding: 2px 9px; border-radius: 20px; font-size: 12.5px; }
.eva-gap.up{ background: var(--good-dim); color: var(--good); }
.eva-gap.down{ background: var(--bad-dim); color: var(--bad); }
.eva-bar{ height: 8px; background: var(--surface-3); border-radius: 20px; overflow: hidden; margin-top: 14px; }
.eva-bar-fill{ height: 100%; border-radius: 20px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.eva-bar-fill.up{ background: linear-gradient(90deg, var(--good), #5fe0a8); }
.eva-bar-fill.warn{ background: linear-gradient(90deg, var(--warn), #ffd074); }
.eva-bar-fill.down{ background: linear-gradient(90deg, var(--bad), #ff8894); }
.eva-bar-fill.flat{ background: var(--text-4); }

.eva-plats{ display:flex; flex-direction: column; gap: 10px; }
.eva-plat{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.eva-plat-head{ display:flex; align-items:center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.eva-dot{ width:8px; height:8px; border-radius:50%; }
.eva-dot.of{ background: var(--onlyfans); } .eva-dot.fv{ background: var(--fanvue); }
.eva-perf{ margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 13px; }
.eva-perf.up{ color: var(--good); } .eva-perf.warn{ color: var(--warn); } .eva-perf.down{ color: var(--bad); } .eva-perf.flat{ color: var(--text-3); }
.eva-nums{ display:flex; align-items:center; gap: 12px; font-size: 12px; color: var(--text-3); }
.eva-nums b{ color: var(--text-2); font-weight: 600; }
.eva-nums .g-up{ color: var(--good); font-weight: 600; margin-left:auto; }
.eva-nums .g-down{ color: var(--bad); font-weight: 600; margin-left:auto; }

@media (max-width: 900px){
  .eva-card{ grid-template-columns: 1fr; }
}

/* ---------- SETTINGS: integrations + members ---------- */
.integration-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.integration-card{
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px;
}
.int-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.int-name{ display:flex; align-items:center; gap:9px; font-family: var(--display); font-weight:600; font-size:15.5px; }
.int-status{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:20px; }
.int-status.on{ background: var(--good-dim); color: var(--good); }
.int-status.off{ background: var(--surface-3); color: var(--text-4); }
.int-body label{ display:block; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; }
.int-key-row{ display:flex; gap:10px; margin-bottom:12px; }
.int-key-row input{
  flex:1; background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-sm);
  padding:10px 14px; color: var(--text); font-size:13.5px; font-family: var(--mono, monospace);
}
.int-key-row input:focus{ outline:none; border-color: var(--pink); box-shadow:0 0 0 3px rgba(236,30,121,0.12); }
.int-actions{ display:flex; gap:10px; }
.int-result{ margin-top:12px; font-size:12.5px; }
.int-result.ok{ color: var(--good); } .int-result.err{ color: var(--warn); }

.mini-select{
  background: var(--surface); border:1px solid var(--line-2); border-radius:8px;
  padding:6px 10px; color: var(--text); font-size:13px; cursor:pointer;
}
.mini-select:focus{ outline:none; border-color: var(--pink); }

@media (max-width: 900px){ .integration-list{ grid-template-columns: 1fr; } }

/* Settings gear button */
.icon-btn-lg{
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: background .14s, color .14s, border-color .14s;
}
.icon-btn-lg:hover{ background: var(--surface-3); color: var(--text); border-color: var(--line-2); }
.icon-btn-lg svg{ width: 19px; height: 19px; }

/* Settings modal groups */
.settings-group{ margin-bottom: 20px; }
.settings-group:last-child{ margin-bottom: 0; }
.settings-group-title{
  display:flex; align-items:center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* Platform averages row */
.pavg-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.pavg-card{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.pavg-head{ display:flex; align-items:center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.pavg-count{ margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-4); }
.pavg-metrics{ display:flex; gap: 22px; flex-wrap: wrap; }
.pavg-m .pavg-v{ font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.pavg-m .pavg-l{ font-size: 11px; color: var(--text-4); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

/* forecast/target sub-line in ranking cards */
.rc-val .rc-sub{ font-family: var(--body); font-size: 10px; font-weight: 500; margin-top: 2px; display:block; }
.rc-val .rc-sub .ok{ color: var(--good); }
.rc-val .rc-sub .under{ color: var(--warn); }
.rc-val .rc-sub .fc{ color: var(--blue-2); }
.rc-val .rc-sub .fc-gross{ color: var(--text-4); }
.rc-foot{ padding: 8px 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--text-4); }

@media (max-width: 900px){
  .pavg-row{ grid-template-columns: 1fr; }
}

/* Chatter rankings — 5 cards on one line (override .rank-cards' 4-col default) */
.rank-cards.crank-cards{ grid-template-columns: repeat(5, 1fr); }
.tpm-row{ justify-content: space-between; }
.tpm-chatter{ font-family: var(--display); font-weight:600; font-size:13px; color: var(--text-2); white-space:nowrap; }
@media (max-width: 1300px){ .rank-cards.crank-cards{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ .rank-cards.crank-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .rank-cards.crank-cards{ grid-template-columns: 1fr; } }

/* ---------- MODEL RANKING CARDS (4 vertical) ---------- */
.rank-cards{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.rank-card{
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.rc-head{
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); padding: 13px 15px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.rc-body{ padding: 6px; }
.rc-row{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
}
.rc-row:hover{ background: var(--surface-2); }
.rc-pos{
  font-family: var(--display); font-weight: 700; font-size: 12px;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink:0;
  display:grid; place-items:center; background: var(--surface-3); color: var(--text-3);
}
.rc-pos.top{ background: var(--good-dim); color: var(--good); }
.rc-pos.bottom{ background: var(--bad-dim); color: var(--bad); }
.rc-name{ flex:1; font-size: 13px; font-weight: 500; color: var(--text); min-width:0;
  display:flex; align-items:center; gap: 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-plat{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.rc-plat.of{ background: var(--onlyfans); } .rc-plat.fv{ background: var(--fanvue); }
.rc-val{ font-family: var(--display); font-weight: 600; font-size: 13.5px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; }
.rc-val .exp{ font-family: var(--body); font-size: 10px; font-weight: 500; margin-top: 1px; }
.rc-val .exp.ok{ color: var(--good); }
.rc-val .exp.under{ color: var(--warn); }
.rc-empty{ padding: 16px; text-align:center; font-size: 12px; color: var(--text-4); }

/* Targets bar */
.targets-bar{
  display:flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap;
}
.tb-item{
  display:flex; align-items:center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 8px 8px 14px;
}
.tb-label{ font-size: 12px; color: var(--text-3); }
.tb-val{
  display:inline-flex; align-items:center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2);
  padding: 5px 11px; border-radius: 8px; transition: border-color .14s;
}
.tb-val:hover{ border-color: var(--pink); }
.tb-val svg{ width: 13px; height: 13px; color: var(--text-4); }

/* legacy single-list ranking (kept for safety, unused) */
.rank-list{ display:flex; flex-direction:column; }

.sort-toggle{ display:inline-flex; gap:4px; background: var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px; }
.sort-toggle button{ padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight:500; color: var(--text-3); transition: background .14s, color .14s; }
.sort-toggle button:hover{ color: var(--text-2); }
.sort-toggle button.active{ background: var(--surface-3); color: var(--text); }

@media (max-width: 1100px){
  .rank-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .rank-cards{ grid-template-columns: 1fr; }
}

/* Empty state for tables */
.table-empty{ padding: 48px 24px; text-align: center; color: var(--text-3); }
.table-empty .te-ic{ width: 46px; height: 46px; margin: 0 auto 14px; color: var(--text-4); }
.table-empty .te-ic svg{ width: 100%; height: 100%; }
.table-empty .te-title{ font-size: 15px; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }
.table-empty .te-sub{ font-size: 13px; max-width: 360px; margin: 0 auto; line-height: 1.6; }

/* Toast */
.toast-wrap{ position: fixed; bottom: 24px; right: 24px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 13px 18px; font-size: 13.5px; color: var(--text);
  box-shadow: var(--shadow); display:flex; align-items:center; gap:10px;
  transform: translateX(120%); animation: slideIn .25s forwards;
}
@keyframes slideIn{ to{ transform: translateX(0); } }
.toast.ok{ border-color: rgba(55,217,150,0.3); }
.toast.err{ border-color: rgba(255,90,106,0.3); }
.toast svg{ width: 17px; height: 17px; flex-shrink:0; }
.toast.ok svg{ color: var(--good); } .toast.err svg{ color: var(--bad); }

@media (max-width: 900px){
  .dtable thead{ display:none; }
  .dtable tbody td{ display:block; padding: 8px 16px; border:none; }
  .dtable tbody tr{ display:block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .form-row{ grid-template-columns: 1fr; }
  .rank-row{ grid-template-columns: 40px 1fr auto; }
  .rank-metric.hide-sm{ display:none; }
}

/* Integration key expiry + alert banner */
.int-expiry{ display:flex; align-items:center; gap:7px; font-size:12.5px; margin:2px 0 12px; }
.int-expiry svg{ width:14px; height:14px; }
.int-expiry.exp-ok{ color: var(--text-3); }
.int-expiry.exp-warn{ color: var(--warn); }
.int-expiry.exp-bad{ color: var(--bad); font-weight:600; }
.int-exp-edit{ margin-left:4px; font-size:11.5px; color: var(--blue-2); text-decoration:underline; background:none; }

.alert-banner{
  position: fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:200;
  display:flex; align-items:center; gap:12px; max-width:760px; width:calc(100% - 40px);
  padding:13px 16px; border-radius: var(--r); font-size:13.5px; line-height:1.45;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
.alert-banner + .alert-banner{ bottom:78px; }
.alert-banner.warn{ background: linear-gradient(180deg, rgba(242,179,56,0.16), rgba(20,20,28,0.96)); border:1px solid rgba(242,179,56,0.4); color: #ffe3a6; }
.alert-banner.expired{ background: linear-gradient(180deg, rgba(255,90,106,0.18), rgba(20,20,28,0.96)); border:1px solid rgba(255,90,106,0.45); color: #ffc9cf; }
.alert-banner .ab-ic{ display:inline-flex; flex-shrink:0; }
.alert-banner .ab-ic svg{ width:18px; height:18px; }
.alert-banner .ab-msg{ flex:1; }
.alert-banner .ab-msg b{ color:#fff; }
.alert-banner .ab-cta{ flex-shrink:0; background: var(--grad); color:#fff; font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:8px; }
.alert-banner .ab-x{ flex-shrink:0; color: inherit; opacity:0.7; display:inline-flex; }
.alert-banner .ab-x svg{ width:15px; height:15px; }
.alert-banner .ab-x:hover{ opacity:1; }

/* Infloww homepage sync panel */
.int-sync{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.sync-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sync-title{ font-family:var(--display); font-weight:600; font-size:14px; }
.sync-sub{ font-size:12.5px; color:var(--text-3); margin-top:2px; }
.sync-hint{ font-size:11.5px; color:var(--text-4); margin-top:8px; line-height:1.4; }
.sync-row .btn-primary svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }

/* Sync diagnostics */
.sync-diag{ margin-top:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:12px; color:var(--text-2); line-height:1.5; }
.sync-diag b{ color:var(--text); }

/* Sync auto-toggle row */
.sync-auto{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.switch-row{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-2); cursor:pointer; }
.switch-row input{ width:16px; height:16px; accent-color:var(--pink); cursor:pointer; }