/* ABVCHAT_MODERN_SYSTEM_V1 */
:root {
  --abv-ink: #040811;
  --abv-night: #07131f;
  --abv-glass: rgba(6, 17, 29, .74);
  --abv-glass-strong: rgba(7, 15, 26, .92);
  --abv-border: rgba(105, 226, 239, .18);
  --abv-border-hot: rgba(103, 243, 208, .48);
  --abv-cyan: #29d8e8;
  --abv-mint: #76f0bf;
  --abv-coral: #ff6d79;
  --abv-violet: #a77bff;
  --abv-white: #effdff;
  --abv-muted: #8ea8b5;
}

body.irc-portal {
  background-color: var(--abv-ink) !important;
  background-image:
    linear-gradient(180deg, rgba(3, 8, 17, .45), rgba(3, 8, 17, .86)),
    url('/abvchat-network-bg-v1.png'),
    radial-gradient(circle at 16% 12%, rgba(41, 216, 232, .12), transparent 28%),
    linear-gradient(135deg, #030711, #091622 52%, #040812) !important;
  background-position: center top, center top, center, center !important;
  background-size: cover, cover, auto, auto !important;
  background-attachment: fixed !important;
}

body.irc-portal::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
  opacity: .52;
  background: linear-gradient(90deg, transparent 0 49.8%, rgba(41, 216, 232, .06) 50%, transparent 50.2%);
  background-size: 100% 100%;
  mix-blend-mode: screen;
}

.site-header {
  border-bottom-color: rgba(118, 240, 191, .23) !important;
  background: rgba(3, 9, 18, .68) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .24);
}

.site-header.scrolled {
  background: rgba(3, 9, 18, .93) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .46), 0 1px 0 rgba(118, 240, 191, .16);
}

.portal-nav {
  height: 78px !important;
  width: min(1480px, calc(100% - 28px)) !important;
  padding-inline: 6px !important;
}

.portal-brand.portal-brand-bgirc {
  width: 178px;
  min-width: 178px;
  padding: 9px 12px 9px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: border-color .25s, background .25s, transform .25s;
}

.portal-brand.portal-brand-bgirc:hover {
  border-color: var(--abv-border);
  background: rgba(41, 216, 232, .06);
  transform: translateY(-1px);
}

.portal-brand.portal-brand-bgirc img {
  width: 154px !important;
  height: 48px !important;
  filter: brightness(1.9) saturate(1.25) drop-shadow(0 0 14px rgba(41, 216, 232, .42)) !important;
}

.portal-links { gap: 4px !important; }
.portal-links a {
  min-height: 42px;
  padding-inline: 11px !important;
  border: 1px solid transparent;
  border-radius: 10px !important;
  color: #a9bfca !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
}
.portal-links a:hover,
.portal-links a.active {
  border-color: var(--abv-border) !important;
  background: linear-gradient(135deg, rgba(41, 216, 232, .13), rgba(118, 240, 191, .06)) !important;
  color: var(--abv-white) !important;
  box-shadow: inset 0 0 20px rgba(41, 216, 232, .06), 0 7px 24px rgba(0, 0, 0, .16) !important;
}
.portal-links a.active > span,
.portal-links a:hover > span { color: var(--abv-mint) !important; }
.nav-apk a { border-color: rgba(167, 123, 255, .32) !important; background: rgba(167, 123, 255, .09) !important; }

.network-live {
  padding: 9px 13px !important;
  border-color: rgba(118, 240, 191, .25) !important;
  background: rgba(6, 23, 29, .72) !important;
  box-shadow: inset 0 0 20px rgba(118, 240, 191, .04);
}
.network-live:hover { border-color: var(--abv-border-hot) !important; }
.network-live b { color: var(--abv-mint) !important; }

.portal-hero {
  min-height: 790px !important;
  padding-top: 112px !important;
  padding-bottom: 104px !important;
}
.hero-grid { gap: clamp(36px, 6vw, 110px) !important; }
.hero-copy h1 {
  max-width: 820px !important;
  margin-top: 24px !important;
  color: var(--abv-white) !important;
  font-size: clamp(3.3rem, 7vw, 7rem) !important;
  line-height: .88 !important;
  text-wrap: balance;
  text-shadow: 0 20px 80px rgba(0, 0, 0, .38);
}
.hero-copy h1 .hero-accent,
.hero-copy .index-title-accent {
  background: linear-gradient(100deg, var(--abv-cyan), var(--abv-mint) 55%, #b6f1ff) !important;
  filter: drop-shadow(0 0 26px rgba(41, 216, 232, .25));
}
.hero-copy > p { max-width: 650px !important; color: #abc1cc !important; font-size: 1.16rem !important; }
.hero-actions { gap: 12px !important; margin-top: 36px !important; }
.portal-btn {
  min-height: 54px !important;
  border-color: var(--abv-border) !important;
  border-radius: 12px !important;
  background: rgba(9, 27, 39, .68) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 12px 30px rgba(0, 0, 0, .16) !important;
}
.portal-btn.primary {
  border-color: rgba(118, 240, 191, .58) !important;
  background: linear-gradient(120deg, #24c7df, #57e0b2 68%, #99f4c7) !important;
  color: #03141a !important;
  box-shadow: 0 16px 38px rgba(41, 216, 232, .18), inset 0 1px rgba(255, 255, 255, .42) !important;
}
.portal-btn:hover { border-color: var(--abv-border-hot) !important; }

.network-console {
  min-height: 460px !important;
  border-color: rgba(41, 216, 232, .3) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(6, 18, 31, .76), rgba(3, 10, 18, .83)),
    url('/abvchat-network-bg-v1.png') center/cover !important;
  box-shadow: 0 38px 110px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(18px) saturate(125%);
}
.network-console::after {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(118, 240, 191, .12);
  border-radius: 17px;
  content: '';
  pointer-events: none;
}
.console-map { opacity: .86; }
.map-core { color: var(--abv-cyan) !important; box-shadow: 0 0 22px var(--abv-cyan), 0 0 70px rgba(41, 216, 232, .52) !important; }
.map-node { color: var(--abv-mint) !important; }
.map-node:nth-child(4), .map-node:nth-child(5) { color: var(--abv-coral) !important; }
.map-line { background: linear-gradient(90deg, rgba(118, 240, 191, .74), rgba(41, 216, 232, .18), transparent) !important; }

.section-pad { padding: 112px 0 !important; }
.section-head h2 { color: var(--abv-white) !important; }
.quick-grid { gap: 15px !important; }
.quick-card,
.channel-card,
.help-card,
.rule-card,
.seo-hub-card {
  border-color: var(--abv-border) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(9, 25, 39, .76), rgba(4, 12, 21, .7)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 20px 55px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(15px) saturate(120%);
}
.quick-card::before { background: linear-gradient(90deg, var(--abv-cyan), var(--abv-mint), transparent 80%) !important; }
.quick-card:hover,
.channel-card:hover { border-color: var(--abv-border-hot) !important; background: rgba(10, 31, 42, .88) !important; }
.quick-card h3,
.channel-card strong,
.help-card h2,
.rule-card h2 { color: var(--abv-white) !important; }
.quick-arrow { color: var(--abv-mint) !important; }
.channel-card i { background: var(--abv-mint) !important; box-shadow: 0 0 15px var(--abv-mint) !important; }

.portal-cta {
  border-color: rgba(167, 123, 255, .3) !important;
  border-radius: 22px !important;
  background: linear-gradient(110deg, rgba(41, 216, 232, .11), rgba(12, 18, 34, .82) 48%, rgba(167, 123, 255, .13)) !important;
}
.portal-footer { border-top-color: rgba(118, 240, 191, .18) !important; }

.reveal { transition-duration: .75s !important; }
@media (max-width: 1060px) {
  .portal-nav { width: calc(100% - 18px) !important; }
  .portal-links a { padding-inline: 8px !important; }
  .network-live { display: none; }
}
@media (max-width: 760px) {
  body.irc-portal { background-attachment: scroll !important; }
  .portal-nav { height: 68px !important; }
  .portal-brand.portal-brand-bgirc { width: 142px; min-width: 142px; padding-left: 0; }
  .portal-brand.portal-brand-bgirc img { width: 132px !important; height: 43px !important; }
  .portal-hero { min-height: auto !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .hero-copy h1 { font-size: clamp(2.75rem, 15vw, 5rem) !important; }
  .hero-copy > p { font-size: 1.04rem !important; }
  .network-console { min-height: 365px !important; border-radius: 19px !important; }
  .section-pad { padding: 74px 0 !important; }
  .portal-cta { display: block !important; padding: 28px !important; }
  .portal-cta .portal-btn { margin-top: 21px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Web chat portal shell */
.chat-page {
  width: min(1440px, calc(100% - 28px)) !important;
  padding-top: 74px !important;
}
.chat-intro { align-items: center !important; margin-bottom: 30px !important; }
.chat-intro h1 { color: var(--abv-white) !important; font-size: clamp(2.6rem, 6vw, 5.6rem) !important; line-height: .9 !important; }
.chat-intro h1 span { background: linear-gradient(100deg, var(--abv-cyan), var(--abv-mint) 58%, #c9f7ff) !important; }
.chat-intro p { color: #abc1cc !important; }
.chat-state { border-color: rgba(118,240,191,.27) !important; background: rgba(118,240,191,.06) !important; color: #c5f8dd !important; }
.chat-state i { background: var(--abv-mint) !important; box-shadow: 0 0 14px var(--abv-mint) !important; }
.chat-frame { border-color: rgba(41,216,232,.3) !important; border-radius: 22px !important; background: rgba(3,10,18,.78) !important; box-shadow: 0 40px 120px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.07) !important; }
.chat-frame header { height: 58px !important; padding-inline: 20px !important; border-bottom-color: rgba(118,240,191,.19) !important; background: rgba(5,16,28,.83) !important; }
.chat-frame header strong { color: var(--abv-mint) !important; }
.chat-frame header a, .chat-fullscreen { color: #baf1e3 !important; }
.chat-links a { border-color: rgba(41,216,232,.2) !important; background: rgba(41,216,232,.06) !important; color: #b4eef0 !important; }
.chat-links a:hover, .chat-links a[aria-current="true"] { border-color: var(--abv-border-hot) !important; background: rgba(118,240,191,.09) !important; color: var(--abv-white) !important; }
.chat-seo-panel, .chat-seo-faq, .chat-control-guide { border-color: var(--abv-border) !important; border-radius: 19px !important; background: linear-gradient(145deg, rgba(8,25,39,.78), rgba(4,12,21,.74)) !important; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 55px rgba(0,0,0,.16) !important; }
.chat-seo-panel h2, .chat-control-lead h2 { color: var(--abv-white) !important; }
.chat-control-guide { background: linear-gradient(145deg, rgba(13,19,39,.82), rgba(4,16,25,.82)) !important; }
@media (max-width: 760px) {
  .chat-page { width: min(100% - 18px, 1440px) !important; padding-top: 46px !important; }
  .chat-intro h1 { font-size: clamp(2.55rem, 14vw, 4.4rem) !important; }
  .chat-frame { border-radius: 17px !important; }
  .chat-frame iframe { min-height: 560px !important; }
}