/* Two rows of three shortcuts on the overview and subscription pages. */
#main:has(> #dash:not(.hide)) { padding-bottom: 0; }
@media (min-width: 681px) {
  #dash .hero {
    height: 219px;
    min-height: 219px;
  }
}
:is(#dash, #subscription) .imports.quick-imports {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
:is(#dash, #subscription) .quick-imports .qi-shortcut,
:is(#dash, #subscription) .quick-imports .qi-all {
  min-height: 52px;
}
:is(#dash, #subscription) .quick-imports .qi-shortcut {
  gap: 12px;
  padding: 10px 14px;
}
:is(#dash, #subscription) .quick-imports .qi-shortcut > .qi-brand-mark,
:is(#dash, #subscription) .quick-imports .qi-brand-mark {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 0;
}
:is(#dash, #subscription) .quick-imports .qi-brand-mark .client-mark {
  width: calc(28px * var(--qi-art-scale, 1));
  height: calc(28px * var(--qi-art-scale, 1));
}
:is(#dash, #subscription) .quick-imports [data-qi-icon="shadowrocket"] { --qi-art-scale: 1.25; }
:is(#dash, #subscription) .quick-imports [data-qi-icon="clash-verge"] { --qi-art-scale: 1.15; }
:is(#dash, #subscription) .quick-imports [data-qi-icon="clash-windows"] { --qi-art-scale: 1.35; }
:is(#dash, #subscription) .quick-imports [data-qi-icon="flclash"],
:is(#dash, #subscription) .quick-imports [data-qi-icon="v2rayn"] { --qi-art-scale: 1; }
:root[data-mode="dark"] :is(#dash, #subscription) .quick-imports [data-qi-icon="clash-verge"] .client-mark {
  filter: invert(1);
}
:is(#dash, #subscription) .quick-imports .qi-all {
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-1);
}
:is(#dash, #subscription) .quick-imports .qi-all:hover { background: var(--surface-2); }
@container (max-width: 620px) {
  :is(#dash, #subscription) .imports.quick-imports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  :is(#dash, #subscription) .imports.quick-imports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The service area uses the same surface and action color as account settings. */
#profile .profile-telegram-column {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}
#profile .telegram-kicker,
#profile .telegram-entry span,
#profile .telegram-footnote { color: var(--ink-3); }
#profile .profile-telegram-column h3,
#profile .telegram-entry b { color: var(--ink); }
#profile .telegram-intro,
#profile .telegram-entry p { color: var(--ink-2); }
#profile .telegram-entry { border-color: var(--line); }
#profile .telegram-entry .telegram-primary,
#profile .telegram-entry .telegram-secondary {
  color: var(--on-accent);
  background: var(--accent-fill);
  border-color: transparent;
  box-shadow: 0 8px 18px -12px var(--accent);
}
#profile .telegram-entry .telegram-primary:hover,
#profile .telegram-entry .telegram-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -14px var(--accent);
}

/* Prevent the subscription import grid from sizing its parent wider than the viewport. */
#subscription .subscription-connect-main { grid-template-columns: minmax(0, 1fr); }