:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--sv-color-text);
  background: var(--sv-color-canvas);
  font-family: var(--sv-font-sans);
}

button, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 74px;
  z-index: 200;
  padding: 8px 12px;
  color: var(--sv-color-on-brand);
  background: var(--sv-color-brand);
  border-radius: var(--sv-radius-control);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.connections-shell {
  width: min(1380px, calc(100vw - 112px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.connections-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding: 0 4px 30px;
}

.back-link {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--sv-color-text-muted);
  font-size: .78rem;
  text-decoration: none;
}

.back-link:hover { color: var(--sv-color-brand); }

.eyebrow,
.section-kicker {
  margin: 0 0 10px;
  color: var(--sv-color-brand);
  font: 600 .68rem/1 var(--sv-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.connections-hero h1 {
  margin: 0;
  font-size: var(--sv-font-size-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.hero-copy {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--sv-color-text-muted);
  font-size: .92rem;
  line-height: 1.75;
}

.connection-overview {
  min-width: 370px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-panel);
  background: rgba(255,255,255,.025);
}

.connection-overview > div {
  padding: 13px 17px;
  border-left: 1px solid var(--sv-color-border-soft);
}

.connection-overview > div:first-child { border-left: 0; }

.connection-overview span,
.connection-overview strong { display: block; }

.connection-overview span {
  color: var(--sv-color-text-faint);
  font-size: .66rem;
}

.connection-overview strong {
  margin-top: 8px;
  color: var(--sv-color-text);
  font: 650 1.25rem/1 var(--sv-font-mono);
}

.connection-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 14px;
  background: var(--sv-color-surface);
}

.connection-tabs button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  color: var(--sv-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color 160ms var(--sv-ease), background 160ms var(--sv-ease), transform 100ms ease;
}

.connection-tabs button:hover { color: var(--sv-color-text); background: var(--sv-color-selection-bg); }
.connection-tabs button:active { transform: scale(.98); }
.connection-tabs button.active { color: var(--sv-color-text); background: var(--sv-color-selection-bg); }

.connection-tabs svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connection-tabs button.active svg { color: var(--sv-color-brand); }

.connection-tabs b {
  min-width: 20px;
  padding: 3px 6px;
  color: var(--sv-color-text-faint);
  background: rgba(255,255,255,.045);
  border-radius: 999px;
  font: 500 .62rem/1 var(--sv-font-mono);
}

.connection-view {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 180px),
    var(--sv-color-surface);
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
  animation: view-in 260ms var(--sv-ease-out) both;
}

.connection-view[hidden] { display: none; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 660;
  letter-spacing: -.025em;
}

.section-head p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--sv-color-text-muted);
  font-size: .82rem;
  line-height: 1.7;
}

.section-actions { display: flex; gap: 9px; }

.sv-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  color: var(--sv-color-text);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-control);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 620;
  transition: color 160ms var(--sv-ease), background 160ms var(--sv-ease), border-color 160ms var(--sv-ease), transform 100ms ease;
}

.sv-button:hover { background: var(--sv-color-selection-bg); border-color: var(--sv-color-selection-border); }
.sv-button:active { transform: scale(.98); }
.sv-button:focus-visible, input:focus-visible, .connection-tabs button:focus-visible { outline: none; box-shadow: var(--sv-focus-ring); }
.sv-button:disabled { opacity: .45; cursor: wait; }
.sv-button.primary { color: var(--sv-color-on-brand); background: var(--sv-color-brand); border-color: var(--sv-color-brand); }
.sv-button.primary:hover { background: var(--sv-color-brand-hover); }
.sv-button.danger { color: var(--sv-color-danger); background: rgba(var(--sv-color-danger-rgb), .08); border-color: rgba(var(--sv-color-danger-rgb), .18); }

.provider-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--sv-color-border-soft);
}

.provider-strip > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 6px;
  color: var(--sv-color-text-muted);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 999px;
  font-size: .7rem;
}

.provider-logo {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--sv-color-text);
  background: var(--sv-color-surface-hover);
  font: 700 .65rem/1 var(--sv-font-sans);
  font-style: normal;
}

.provider-logo.gmail { background: #b84b45; }
.provider-logo.qq { background: #3579c7; }
.provider-logo.netease { background: #b63b36; }
.provider-logo.imap { color: var(--sv-color-on-brand); background: var(--sv-color-brand); }

.connection-list,
.social-account-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.mail-card,
.social-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-panel);
  background: rgba(255,255,255,.018);
  transition: background 180ms var(--sv-ease), border-color 180ms var(--sv-ease), transform 180ms var(--sv-ease);
}

.mail-card:hover,
.social-card:hover {
  background: rgba(255,255,255,.032);
  border-color: var(--sv-color-selection-border);
  transform: translateY(-1px);
}

.mail-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--sv-color-text);
  background: var(--sv-color-surface-strong);
  border: 1px solid var(--sv-color-border-soft);
  font-weight: 750;
}

.mail-card-copy { min-width: 0; }

.mail-card-copy strong,
.mail-card-copy span { display: block; }

.mail-card-copy strong { font-size: .88rem; font-weight: 620; }
.mail-card-copy span { margin-top: 5px; color: var(--sv-color-text-muted); font-size: .72rem; }

.status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: var(--sv-color-text-muted);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  font-size: .62rem;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sv-color-text-faint);
}

.status-pill.ready::before { background: var(--sv-color-success); }
.status-pill.error::before { background: var(--sv-color-danger); }
.status-pill.checking::before { background: var(--sv-color-warning); animation: blink 900ms ease infinite alternate; }

.mail-counts {
  display: flex;
  gap: 16px;
  color: var(--sv-color-text-faint);
  font-size: .64rem;
}

.mail-counts b { color: var(--sv-color-text); font: 600 .72rem/1 var(--sv-font-mono); }

.card-actions { display: flex; gap: 7px; }
.card-actions .sv-button { min-height: 34px; padding-inline: 11px; font-size: .68rem; }

.empty-connection,
.loading-card {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 40px;
  border: 1px dashed var(--sv-color-border);
  border-radius: var(--sv-radius-panel);
  color: var(--sv-color-text-muted);
  text-align: center;
}

.empty-connection svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--sv-color-brand);
  stroke-width: 1.25;
}

.empty-connection strong { color: var(--sv-color-text); font-size: .92rem; }
.empty-connection p { max-width: 470px; margin: 0; color: var(--sv-color-text-muted); font-size: .75rem; line-height: 1.7; }

.loading-card i {
  width: 30px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--sv-color-brand), transparent);
  animation: loading 1s ease-in-out infinite;
}

.social-toolbar {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.social-toolbar-meta { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
.social-toolbar-meta > span { color: var(--sv-color-text-faint); font-size: .7rem; }

.platform-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.platform-tabs button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--sv-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.platform-tabs button.active { color: var(--sv-color-text); background: var(--sv-color-selection-bg); }

.social-toolbar label { color: var(--sv-color-text-muted); font-size: .7rem; }
.social-toolbar input { width: 56px; margin: 0 5px; text-align: center; }

input {
  min-height: 39px;
  padding: 0 11px;
  color: var(--sv-color-text);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-control);
}

select {
  min-height: 39px;
  padding: 0 34px 0 11px;
  color: var(--sv-color-text);
  color-scheme: dark;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-control);
}

select:hover { border-color: var(--sv-color-selection-border); }

input:hover { border-color: var(--sv-color-selection-border); }

.social-card {
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas:
    "fields actions"
    "options actions";
  align-items: start;
  gap: 11px 18px;
}
.social-card-fields {
  grid-area: fields;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(140px,.7fr) minmax(180px,1fr) minmax(240px,1.25fr);
  gap: 9px;
}
.social-card-fields input { width: 100%; min-width: 0; }
.social-card-options { grid-area: options; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--sv-color-text-muted); font-size: .7rem; }
.social-card-options label { display: inline-flex; align-items: center; gap: 5px; }
.social-card-options input { min-height: 0; width: auto; accent-color: var(--sv-color-brand); }
.social-status { color: var(--sv-color-text-faint); font-size: .64rem; }
.social-card > .card-actions { grid-area: actions; align-self: center; white-space: nowrap; }

.section-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sv-color-border-soft);
  color: var(--sv-color-text-faint);
  font-size: .68rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 26px;
}

.service-card {
  min-height: 128px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: inherit;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: var(--sv-radius-panel);
  text-decoration: none;
}

.service-card:not(.disabled):hover { background: var(--sv-color-selection-bg); border-color: var(--sv-color-selection-border); }
.service-card.disabled { opacity: .48; }
.service-icon { width: 42px; height: 42px; display:grid; place-items:center; border-radius:13px; background:var(--sv-color-surface-strong); font-style:normal; }
.service-card strong, .service-card span { display:block; }
.service-card strong { font-size:.82rem; }
.service-card span { margin-top:6px; color:var(--sv-color-text-muted); font-size:.67rem; }
.service-card em { color:var(--sv-color-text-muted); font-size:.66rem; font-style:normal; }

.notification-view {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(var(--sv-brand-rgb),.035), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.018) 25%),
    var(--sv-color-surface);
}

.notification-view::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 72px;
  height: 2px;
  background: var(--sv-color-brand);
  box-shadow: 82px 0 rgba(var(--sv-brand-rgb),.35), 174px 0 rgba(var(--sv-brand-rgb),.12);
}

.notification-head { position: relative; z-index: 1; }

.notification-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, .55fr)) minmax(260px, 1.4fr);
  gap: 1px;
  margin-top: 25px;
  overflow: hidden;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 14px;
  background: var(--sv-color-border-soft);
}

.notification-pulse > div,
.notification-pulse > p { margin: 0; padding: 15px 17px; background: var(--sv-color-surface-subtle); }
.notification-pulse span { display: block; color: var(--sv-color-text-muted); font-size: .63rem; }
.notification-pulse strong { display: block; margin-top: 7px; color: var(--sv-color-text); font: 650 1.15rem/1 var(--sv-font-mono); }
.notification-pulse small { display: block; margin-top: 8px; color: var(--sv-color-text-faint); font: 560 .48rem/1 var(--sv-font-mono); letter-spacing: .12em; }
.notification-pulse > p { display: flex; align-items: center; gap: 11px; }
.notification-pulse > p i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--sv-color-success); box-shadow: 0 0 0 5px rgba(91,203,132,.08), 0 0 22px rgba(91,203,132,.22); animation: notification-pulse 1.8s ease-in-out infinite; }
.notification-pulse > p span { line-height: 1.55; }

.notification-block { margin-top: 30px; }
.notification-block > header { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 14px; }
.notification-block > header span { color: var(--sv-color-brand); font: 650 .52rem/1 var(--sv-font-mono); letter-spacing: .14em; }
.notification-block > header h3 { margin: 7px 0 0; font-size: 1rem; letter-spacing: -.01em; }
.notification-block > header p { max-width: 470px; margin: 0; color: var(--sv-color-text-faint); font-size: .64rem; line-height: 1.6; text-align: right; }

.notification-channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.notification-route-map { display:grid; grid-template-columns:auto minmax(150px,1fr) auto minmax(150px,1fr) minmax(210px,auto); align-items:center; gap:12px; margin-top:12px; padding:13px 15px; border:1px solid rgba(var(--sv-brand-rgb),.18); border-radius:13px; background:linear-gradient(90deg,rgba(var(--sv-brand-rgb),.055),rgba(255,255,255,.012)); }
.notification-route-map > span { color:var(--sv-color-brand); font:650 .52rem/1 var(--sv-font-mono); letter-spacing:.14em; }
.notification-route-map strong { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 11px; border:1px solid rgba(7,193,96,.24); border-radius:9px; color:#82e6ae; background:rgba(7,193,96,.055); font-size:.66rem; }
.notification-route-map strong i { color:#07c160; font:.56rem/1 var(--sv-font-mono); font-style:normal; }
.notification-route-map strong.fallback { border-color:rgba(var(--sv-brand-rgb),.21); color:var(--sv-color-text); background:rgba(var(--sv-brand-rgb),.035); }
.notification-route-map strong.fallback i { color:var(--sv-color-brand); }
.notification-route-map em { position:relative; color:var(--sv-color-warning); font:.52rem/1 var(--sv-font-mono); font-style:normal; white-space:nowrap; }
.notification-route-map em::before,.notification-route-map em::after { content:""; display:inline-block; width:12px; height:1px; margin:0 5px 3px; background:currentColor; opacity:.45; }
.notification-route-map small { color:var(--sv-color-text-faint); font-size:.56rem; text-align:right; }
.notification-channel-grid > .loading-card { grid-column: 1 / -1; min-height: 150px; }
.notification-channel-card {
  position: relative;
  min-height: 164px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-content: start;
  gap: 12px 14px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
  transition: transform 180ms var(--sv-ease), border-color 180ms var(--sv-ease), background 180ms var(--sv-ease);
}
.notification-channel-card:hover { transform: translateY(-1px); border-color: var(--sv-color-selection-border); background: rgba(255,255,255,.027); }
.notification-channel-card::after { content:""; position:absolute; right:0; top:0; width:42px; height:1px; background:rgba(var(--sv-brand-rgb),.46); }
.notification-channel-mark { width: 42px; height: 42px; display:grid; place-items:center; border:1px solid var(--sv-color-border-soft); border-radius:12px; color:var(--sv-color-brand); background:rgba(var(--sv-brand-rgb),.05); font:700 .61rem/1 var(--sv-font-mono); font-style:normal; }
.notification-channel-copy { min-width:0; }
.notification-channel-copy strong { display:block; font-size:.8rem; }
.notification-channel-copy > span { display:block; margin-top:5px; overflow:hidden; color:var(--sv-color-text-faint); font:.57rem/1.5 var(--sv-font-mono); text-overflow:ellipsis; white-space:nowrap; }
.notification-channel-copy p { margin:9px 0 0; color:var(--sv-color-text-muted); font-size:.64rem; line-height:1.5; }
.notification-channel-foot { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:11px; border-top:1px solid var(--sv-color-border-soft); }
.notification-channel-actions { display:flex; flex-wrap:wrap; gap:6px; }
.notification-channel-actions .sv-button { min-height:30px; padding-inline:9px; font-size:.61rem; }

.notification-rule-list { display:grid; gap:8px; }
.notification-rule-group { display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; }
.notification-rule-group > h4 { margin:0; padding:15px 0 0; color:var(--sv-color-text-faint); font:650 .55rem/1 var(--sv-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.notification-rule-stack { display:grid; gap:7px; }
.notification-rule-card { display:grid; grid-template-columns:minmax(210px,1.15fr) minmax(160px,.75fr) minmax(260px,1.2fr); align-items:center; gap:16px; padding:13px 15px; border:1px solid var(--sv-color-border-soft); border-radius:12px; background:rgba(255,255,255,.016); }
.notification-rule-identity { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px; }
.notification-switch { position:relative; width:31px; height:18px; flex:0 0 auto; }
.notification-switch input { position:absolute; opacity:0; pointer-events:none; }
.notification-switch span { position:absolute; inset:0; border:1px solid var(--sv-color-border); border-radius:999px; background:rgba(255,255,255,.045); cursor:pointer; transition:160ms ease; }
.notification-switch span::after { content:""; position:absolute; left:3px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--sv-color-text-faint); transition:160ms ease; }
.notification-switch input:checked + span { border-color:rgba(var(--sv-brand-rgb),.35); background:rgba(var(--sv-brand-rgb),.13); }
.notification-switch input:checked + span::after { left:16px; background:var(--sv-color-brand); }
.notification-rule-copy strong { display:block; font-size:.72rem; }
.notification-rule-copy span { display:block; margin-top:4px; color:var(--sv-color-text-faint); font-size:.58rem; line-height:1.45; }
.notification-rule-mode { display:flex; align-items:center; gap:7px; }
.notification-rule-mode select,.notification-rule-mode input { width:100%; min-height:34px; font-size:.61rem; }
.notification-destinations { display:flex; flex-wrap:wrap; gap:6px; }
.notification-destination { display:inline-flex; align-items:center; gap:5px; min-height:27px; padding:0 8px; border:1px solid var(--sv-color-border-soft); border-radius:7px; color:var(--sv-color-text-muted); background:rgba(255,255,255,.02); font-size:.56rem; cursor:pointer; }
.notification-destination input { width:auto; min-height:0; accent-color:var(--sv-color-brand); }

.notification-delivery-list { overflow:hidden; border:1px solid var(--sv-color-border-soft); border-radius:13px; }
.notification-delivery-row { min-height:54px; display:grid; grid-template-columns:92px minmax(210px,1fr) minmax(120px,.45fr) 112px auto; align-items:center; gap:12px; padding:10px 13px; border-top:1px solid var(--sv-color-border-soft); background:rgba(255,255,255,.012); }
.notification-delivery-row:first-child { border-top:0; }
.notification-delivery-row time { color:var(--sv-color-text-faint); font:.55rem/1.35 var(--sv-font-mono); }
.notification-delivery-row strong { display:block; font-size:.67rem; }
.notification-delivery-row p { margin:4px 0 0; overflow:hidden; color:var(--sv-color-text-faint); font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.notification-delivery-row > span { color:var(--sv-color-text-muted); font-size:.59rem; }
.delivery-status { justify-self:start; padding:4px 7px; border-radius:999px; color:var(--sv-color-text-muted); background:rgba(255,255,255,.04); font:.55rem/1 var(--sv-font-mono); }
.delivery-status.sent { color:var(--sv-color-success); background:rgba(91,203,132,.08); }
.delivery-status.failed { color:var(--sv-color-danger); background:rgba(var(--sv-color-danger-rgb),.08); }
.delivery-status.failed_over { color:var(--sv-color-warning); background:rgba(255,190,78,.08); }
.delivery-status.retry,.delivery-status.pending { color:var(--sv-color-warning); background:rgba(255,190,78,.08); }
.notification-delivery-row .sv-button { min-height:28px; padding-inline:8px; font-size:.58rem; }
.notification-empty { padding:28px; color:var(--sv-color-text-faint); font-size:.66rem; text-align:center; }
.notification-dialog { width:min(600px,calc(100vw - 32px)); }
.notification-dialog select { width:100%; }

@keyframes notification-pulse { 50% { opacity:.5; transform:scale(.82); } }

.weixin-connector {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px,1.1fr) minmax(280px,1fr);
  gap: 26px 36px;
  padding: 28px;
  border: 1px solid rgba(7,193,96,.22);
  border-radius: 18px;
  background:
    linear-gradient(125deg, rgba(7,193,96,.075), transparent 45%),
    rgba(255,255,255,.018);
}
.weixin-connector::after { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,#07c160,transparent 42%); }
.weixin-identity { display:flex; align-items:center; gap:16px; }
.weixin-mark { width:54px; height:54px; display:grid; place-items:center; flex:0 0 auto; color:#07110b; background:#07c160; border-radius:15px; font-size:1.05rem; font-style:normal; font-weight:800; box-shadow:0 12px 30px rgba(7,193,96,.16); }
.weixin-identity span { display:block; color:#69d99e; font:600 .59rem/1 var(--sv-font-mono); letter-spacing:.12em; }
.weixin-identity strong { display:block; margin-top:8px; font-size:1.08rem; }
.weixin-identity p { margin:7px 0 0; color:var(--sv-color-text-muted); font-size:.69rem; line-height:1.55; }
.weixin-route { display:flex; align-items:center; justify-content:flex-end; gap:10px; color:var(--sv-color-text-muted); font:600 .65rem/1 var(--sv-font-mono); }
.weixin-route span { padding:8px 10px; border:1px solid var(--sv-color-border-soft); border-radius:8px; background:rgba(0,0,0,.12); }
.weixin-route i { color:#07c160; font-style:normal; }
.weixin-facts { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0; overflow:hidden; border:1px solid var(--sv-color-border-soft); border-radius:12px; background:var(--sv-color-border-soft); }
.weixin-facts div { padding:13px 15px; background:rgba(10,13,12,.78); }
.weixin-facts dt { color:var(--sv-color-text-faint); font-size:.6rem; }
.weixin-facts dd { margin:5px 0 0; color:var(--sv-color-text); font-size:.69rem; }
.weixin-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.weixin-footnote { grid-column:1/-1; margin:-10px 0 0; color:var(--sv-color-text-faint); font-size:.62rem; line-height:1.6; }
.weixin-dialog { width:min(470px,calc(100vw - 32px)); }
.weixin-dialog-body { padding:24px; }
.weixin-qr-stage { position:relative; width:300px; max-width:100%; aspect-ratio:1; display:grid; place-items:center; margin:24px auto 16px; border:1px solid rgba(7,193,96,.2); border-radius:18px; background:#fff; }
.weixin-qr-stage img { display:block; width:280px; max-width:92%; height:auto; border-radius:8px; }
.weixin-qr-stage i { position:absolute; inset:10px; pointer-events:none; border:1px solid rgba(7,193,96,.2); border-radius:12px; }
.weixin-pair-status { min-height:42px; margin:0; color:var(--sv-color-text-muted); font-size:.72rem; line-height:1.65; text-align:center; }
.weixin-verify { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:14px; }
.weixin-dialog footer { margin-top:18px; }

.mail-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  color: var(--sv-color-text);
  background: var(--sv-color-surface);
  border: 1px solid var(--sv-color-border);
  border-radius: 20px;
  box-shadow: var(--sv-shadow-dialog);
  overflow: auto;
}

.mail-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.mail-dialog[open] { animation: dialog-in 230ms var(--sv-ease-out) both; }
.mail-dialog form { padding: 24px; }
.mail-dialog header { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.mail-dialog header span { color:var(--sv-color-brand); font:600 .62rem/1 var(--sv-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.mail-dialog h2 { margin:8px 0 0; font-size:1.45rem; }
.dialog-close { width:34px; height:34px; color:var(--sv-color-text-muted); background:rgba(255,255,255,.035); border:1px solid var(--sv-color-border-soft); border-radius:10px; cursor:pointer; font-size:1.2rem; }

.provider-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:22px; }
.provider-picker button { min-height:66px; display:grid; place-items:center; gap:5px; padding:8px 4px; color:var(--sv-color-text-muted); background:rgba(255,255,255,.02); border:1px solid var(--sv-color-border-soft); border-radius:11px; cursor:pointer; font-size:.66rem; }
.provider-picker button.active { color:var(--sv-color-text); border-color:rgba(var(--sv-brand-rgb),.34); background:rgba(var(--sv-brand-rgb),.075); }
.provider-picker .provider-logo { width:27px; height:27px; }

.mail-setup-guide {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}

.mail-setup-guide[open] {
  border-color: rgba(var(--sv-brand-rgb),.22);
  background: linear-gradient(145deg, rgba(var(--sv-brand-rgb),.055), rgba(255,255,255,.012) 58%);
}

.mail-setup-guide summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.mail-setup-guide summary::-webkit-details-marker { display: none; }
.mail-setup-guide summary span,
.mail-setup-guide summary b,
.mail-setup-guide summary small { display: block; }
.mail-setup-guide summary b { color: var(--sv-color-text); font-size: .72rem; }
.mail-setup-guide summary small { margin-top: 4px; color: var(--sv-color-text-faint); font-size: .59rem; }
.mail-setup-guide summary em { color: var(--sv-color-brand); font: 600 .61rem/1 var(--sv-font-mono); font-style: normal; }
.mail-setup-guide[open] summary em { font-size: 0; }
.mail-setup-guide[open] summary em::after { content: "收起教程"; font-size: .61rem; }

.mail-guide-body {
  padding: 2px 14px 14px;
  border-top: 1px solid var(--sv-color-border-soft);
}

.mail-guide-body ol {
  display: grid;
  gap: 9px;
  margin: 13px 0;
  padding: 0;
  list-style: none;
  counter-reset: mail-guide;
}

.mail-guide-body li {
  min-height: 28px;
  display: grid;
  grid-template-columns: 23px minmax(0,1fr);
  align-items: start;
  gap: 9px;
  color: var(--sv-color-text-muted);
  font-size: .66rem;
  line-height: 1.55;
  counter-increment: mail-guide;
}

.mail-guide-body li::before {
  content: counter(mail-guide, decimal-leading-zero);
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--sv-brand-rgb),.25);
  border-radius: 7px;
  color: var(--sv-color-brand);
  font: 600 .56rem/1 var(--sv-font-mono);
}

.mail-guide-note {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  padding: 10px 11px;
  border-radius: 9px;
  color: var(--sv-color-text-muted);
  background: rgba(255,190,78,.055);
  border: 1px solid rgba(255,190,78,.14);
  font-size: .62rem;
  line-height: 1.5;
}

.mail-guide-note strong { color: #e7ba68; white-space: nowrap; }
.mail-guide-body > a { display: inline-flex; margin-top: 11px; color: var(--sv-color-info); font-size: .63rem; text-decoration: none; }
.mail-guide-body > a:hover { color: var(--sv-color-text); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1 / -1; }
.field > span { color:var(--sv-color-text-muted); font-size:.68rem; }
.field small { color:var(--sv-color-text-faint); font-size:.61rem; line-height:1.55; }
.enable-switch { display:flex; align-items:center; gap:9px; margin-top:17px; color:var(--sv-color-text-muted); font-size:.7rem; }
.enable-switch input { min-height:0; width:auto; accent-color:var(--sv-color-brand); }
.form-message { min-height:18px; margin:12px 0 0; color:var(--sv-color-danger); font-size:.67rem; }
.mail-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; padding-top:18px; border-top:1px solid var(--sv-color-border-soft); }

.team-seat-strip {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  color: var(--sv-color-text-muted);
  font-size: .78rem;
}
.team-seat-strip b { color: var(--sv-color-brand); font-family: var(--sv-font-mono); }
.team-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.member-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--sv-color-on-brand);
  background: var(--sv-color-brand);
  font-weight: 700;
}
.team-card-main { display: grid; gap: 8px; }
.team-card-main strong { font-size: 1rem; }
.team-card-main small, .team-card-main em { color: var(--sv-color-text-muted); font-size: .72rem; font-style: normal; }
.team-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px 10px;
}
.team-cap { display: flex; align-items: center; gap: 7px; color: var(--sv-color-text-muted); font-size: .72rem; }
.team-points { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.team-points label { display: grid; gap: 4px; color: var(--sv-color-text-muted); font-size: .68rem; }
.team-points select, .team-points input {
  min-height: 36px;
  padding: 0 10px;
  color: var(--sv-color-text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sv-color-border-soft);
  border-radius: 10px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 180;
  max-width: 380px;
  padding: 12px 15px;
  color: var(--sv-color-text);
  background: var(--sv-color-surface-strong);
  border: 1px solid var(--sv-color-border);
  border-radius: 12px;
  box-shadow: var(--sv-shadow-panel);
  font-size: .72rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms var(--sv-ease), transform 180ms var(--sv-ease);
}
.toast.show { opacity:1; transform:translateY(0); }
.toast.error { border-color:rgba(var(--sv-color-danger-rgb),.35); }

@keyframes view-in { from { opacity:0; transform:translateY(7px); } }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes loading { 50% { transform:scaleX(1.8); opacity:.5; } }
@keyframes blink { to { opacity:.35; } }

@media (max-width: 980px) {
  .connections-shell { width:calc(100vw - 92px); padding-top:28px; }
  .connections-hero { align-items:start; flex-direction:column; }
  .connection-overview { width:100%; min-width:0; }
  .section-head { align-items:start; flex-direction:column; }
  .service-grid { grid-template-columns:1fr; }
  .social-card { grid-template-columns:1fr; grid-template-areas:"fields" "options" "actions"; }
  .social-card-fields { grid-template-columns:1fr; }
  .social-card > .card-actions { justify-self:end; }
  .weixin-connector { grid-template-columns:1fr; }
  .weixin-route { justify-content:flex-start; }
  .notification-pulse { grid-template-columns:repeat(3,1fr); }
  .notification-pulse > p { grid-column:1/-1; }
  .notification-rule-card { grid-template-columns:1fr; gap:10px; }
}

@media (max-width: 680px) {
  .connections-shell { width:calc(100vw - 80px); }
  .connection-tabs { width:100%; display:grid; grid-template-columns:repeat(2,1fr); }
  .connection-tabs button { justify-content:center; padding-inline:8px; }
  .connection-tabs button b { display:none; }
  .connection-view { padding:20px; border-radius:16px; }
  .connection-overview { grid-template-columns:1fr; }
  .connection-overview > div { border-left:0; border-top:1px solid var(--sv-color-border-soft); }
  .connection-overview > div:first-child { border-top:0; }
  .mail-card { grid-template-columns:auto minmax(0,1fr); }
  .mail-card .card-actions { grid-column:1 / -1; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .provider-picker { grid-template-columns:repeat(3,1fr); }
  .weixin-facts { grid-template-columns:1fr; }
  .weixin-route { flex-wrap:wrap; }
  .notification-channel-grid { grid-template-columns:1fr; }
  .notification-route-map { grid-template-columns:1fr; }
  .notification-route-map em::before,.notification-route-map em::after { width:22px; }
  .notification-route-map small { text-align:left; }
  .notification-pulse { grid-template-columns:1fr 1fr; }
  .notification-pulse > p { grid-column:1/-1; }
  .notification-rule-group { grid-template-columns:1fr; }
  .notification-rule-group > h4 { padding-top:8px; }
  .notification-delivery-row { grid-template-columns:72px 1fr auto; }
  .notification-delivery-row > span { display:none; }
  .notification-delivery-row .sv-button { grid-column:2/-1; justify-self:end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Light-mode semantic adapter. */
html[data-theme="light"] .provider-logo:not(.imap) { color:var(--sv-color-emphasis-text); }

html[data-theme="light"] .provider-logo.qq { background:var(--sv-color-info); }