@charset "UTF-8";

/* Bright editorial theme for vip.qytang.com. Kept separate from layout rules. */
:root {
  --ink: #12233f;
  --ink-soft: #334c70;
  --muted: #667b99;
  --night: #f4f8ff;
  --night-blue: #eef5ff;
  --panel: #ffffff;
  --panel-light: #f5f9ff;
  --line: rgba(39, 87, 151, .13);
  --line-strong: rgba(39, 87, 151, .23);
  --blue: #176ee5;
  --blue-bright: #247be8;
  --cyan: #0abbb5;
  --gold: #b48a32;
  --purple: #7257db;
  --shadow: 0 30px 80px rgba(37, 78, 137, .14);
}

body {
  background: #f5f8fd;
  color: var(--ink);
}

.site-header {
  background: linear-gradient(180deg, rgba(247, 251, 255, .96), rgba(247, 251, 255, .68) 66%, transparent);
}

.site-header.is-scrolled {
  border-color: rgba(34, 83, 148, .12);
  background: rgba(250, 252, 255, .9);
  box-shadow: 0 12px 40px rgba(49, 87, 139, .1);
}

.brand-mark {
  border-color: rgba(39, 111, 207, .25);
  background: linear-gradient(145deg, #fff, #eaf3ff);
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(38, 105, 199, .15);
}

.brand-copy strong { color: #102441; }
.brand-copy small { color: #6780a2; }
.desktop-nav a { color: #4c6280; }
.desktop-nav a:hover { color: #0d58bd; }
.language-switcher { color: #8a9ab0; }
.language-switcher a { color: #687e9b; }
.language-switcher a:hover,
.language-switcher a.is-active { color: #145fca; }
.header-cta {
  border-color: rgba(28, 105, 210, .3);
  background: linear-gradient(135deg, #287bea, #1765d0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px rgba(35, 105, 203, .2);
  color: #fff;
}

.hero {
  border-color: rgba(44, 92, 154, .12);
  background:
    radial-gradient(circle at 78% 38%, rgba(56, 139, 255, .2), transparent 29%),
    radial-gradient(circle at 14% 83%, rgba(44, 210, 202, .12), transparent 28%),
    linear-gradient(135deg, #fbfdff 0%, #eff6ff 54%, #e9f4ff 100%);
}

.hero-grid {
  opacity: .58;
  background-image:
    linear-gradient(rgba(42, 104, 188, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 104, 188, .075) 1px, transparent 1px);
}

.hero-grid::after {
  background: linear-gradient(90deg, rgba(251, 253, 255, .98) 3%, transparent 31%, transparent 72%, rgba(236, 246, 255, .9) 97%);
}

.hero-glow-one { background: rgba(57, 132, 244, .14); }
.hero-glow-two { background: rgba(27, 190, 187, .1); }
.hero h1 { color: #11233e; }
.hero h1 em {
  background: linear-gradient(100deg, #176ee5 5%, #267eea 48%, #08aaa7 100%);
  background-clip: text;
  color: transparent;
  text-shadow: 0 14px 45px rgba(36, 113, 218, .1);
}
.hero-lead { color: #586f8f; }
.text-button { color: #334d70; }
.play-dot { background: rgba(255, 255, 255, .68); box-shadow: 0 8px 22px rgba(44, 93, 157, .1); }
.hero-metrics dt { color: #153153; }
.hero-metrics dd { color: #6b7f9a; }

.orbit-shell::before {
  background: radial-gradient(circle, rgba(54, 133, 243, .2), transparent 62%);
  box-shadow: 0 0 100px rgba(48, 119, 218, .11);
}
.orbit-ring { border-color: rgba(45, 105, 190, .26); }
.orbit-ring-middle { border-color: rgba(34, 101, 198, .34); }
.orbit-ring-inner { border-color: rgba(10, 174, 170, .32); }
.orbit-axis { border-color: rgba(43, 101, 184, .17); }
.orbit-core {
  border-color: rgba(35, 111, 217, .34);
  background: radial-gradient(circle at 40% 32%, #fff, #dcecff 72%);
  box-shadow: inset 0 0 28px rgba(54, 128, 239, .12), 0 18px 55px rgba(31, 103, 187, .16);
}
.orbit-core span { color: #52739f; }
.orbit-node { color: #4e6d96; }
.signal-card {
  border-color: rgba(41, 93, 160, .16);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 22px 55px rgba(43, 85, 142, .13);
}
.signal-card small { color: #7185a0; }
.signal-card strong { color: #183453; }
.signal-card span { color: #5f7899; }
.scroll-cue { color: #7188a6; }

.course-systems {
  background:
    radial-gradient(circle at 50% 20%, rgba(61, 136, 238, .07), transparent 34%),
    #f7faff;
}
.section-heading h2,
.catalog-header h2,
.media-heading h2 { color: #102441; }
.section-heading > p { color: #607593; }
.system-card {
  border-color: rgba(41, 85, 145, .14);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 55px rgba(51, 89, 143, .11);
}
.system-card:hover {
  border-color: rgba(34, 111, 216, .3);
  box-shadow: 0 32px 75px rgba(45, 91, 157, .16);
}
.system-content h3 { color: #122844; }
.system-content > p { color: #617591; }
.system-meta { color: #657b98; }
.tag-row span {
  background: #f5f8fd;
  color: #536b8b;
}
.system-content > a { border-color: rgba(31, 103, 199, .19); color: #1c5cae; background: #edf5ff; }
.system-content > a:hover { border-color: rgba(31, 103, 199, .36); background: #e3f0ff; }
.vip-card .system-content > a { border-color: rgba(166, 119, 28, .2); color: #8b6519; background: #fff7e5; }
.vip-card .system-content > a:hover { border-color: rgba(166, 119, 28, .38); background: #fff1d2; }
.aiops-card .system-content > a { border-color: rgba(5, 143, 139, .2); color: #087b78; background: #e9faf8; }
.aiops-card .system-content > a:hover { border-color: rgba(5, 143, 139, .38); background: #dcf7f4; }

/* 思维导图入口：白底上原来的浅金 / 浅青看不清，这里用同色系的实底描边按钮。
   仍然比主 CTA 弱一档（虚线边、字号小一号），但要清楚可读。 */
.system-content > a.mindmap-link { border-style: dashed; border-color: rgba(31, 103, 199, .34); color: #1c5cae; background: #f3f8ff; font-size: 12px; }
.system-content > a.mindmap-link:hover { border-style: solid; border-color: rgba(31, 103, 199, .58); color: #10407e; background: #e6f0ff; }
.vip-card .system-content > a.mindmap-link { border-color: rgba(166, 119, 28, .38); color: #8b6519; background: #fffaee; }
.vip-card .system-content > a.mindmap-link:hover { border-color: rgba(166, 119, 28, .62); color: #6b4b0d; background: #fff2d4; }
.aiops-card .system-content > a.mindmap-link { border-color: rgba(5, 143, 139, .38); color: #087b78; background: #eefbf9; }
.aiops-card .system-content > a.mindmap-link:hover { border-color: rgba(5, 143, 139, .62); color: #045a58; background: #dbf6f3; }

.evolution-art {
  background:
    linear-gradient(145deg, rgba(73, 148, 248, .24), transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(60, 119, 198, .07) 36px),
    #eaf3ff;
}
.vip-art {
  background:
    radial-gradient(circle at 63% 43%, rgba(199, 158, 70, .22), transparent 33%),
    linear-gradient(145deg, rgba(209, 177, 103, .18), transparent 54%),
    #fbf7eb;
}
.aiops-art {
  background:
    radial-gradient(circle at 51% 51%, rgba(24, 195, 185, .2), transparent 29%),
    linear-gradient(145deg, rgba(38, 185, 180, .14), transparent 54%),
    #e9f9f7;
}
.art-index { color: rgba(35, 66, 105, .64); }
.art-caption { color: rgba(39, 67, 103, .55); }

.evolution-section {
  border-color: rgba(38, 83, 145, .12);
  background: #f7faff;
}
.catalog-number { color: rgba(40, 91, 160, .16); }
.catalog-header > div:nth-child(2) > p:last-child { color: #5d7290; }
.catalog-badge { background: rgba(35, 113, 220, .06); }
.catalog-badge span { color: #1f6ed5; }
.catalog-badge small { color: #657d9e; }
.catalog-badge.is-cyan { background: rgba(9, 174, 169, .07); }
.catalog-badge.is-cyan span { color: #078f8c; }
.catalog-search,
.filter-panel {
  border-color: rgba(35, 94, 173, .16);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 9px 30px rgba(45, 88, 146, .05);
}
.catalog-search input { color: #17304f; }
.catalog-search input::placeholder { color: #8192a8; }
.catalog-search > span,
.filter-group > span { color: #637a99; }
.filter-group button { color: #58708f; }
.filter-group button:hover { color: #145fca; }
.filter-group button.is-active {
  border-color: rgba(33, 107, 209, .2);
  background: rgba(31, 111, 224, .1);
  color: #155fca;
}
.episode-card {
  border-color: rgba(38, 83, 145, .14);
  background: #fff;
  box-shadow: 0 16px 42px rgba(43, 82, 136, .08);
}
.episode-copy h3 { color: #18314f; }
.episode-copy > p { color: #657a97; }
.episode-copy footer span { color: #7789a1; }
.episode-copy footer button { color: #1769d4; }
.catalog-more button {
  background: #fff;
  color: #294e7c;
  box-shadow: 0 9px 28px rgba(40, 82, 140, .07);
}

.vip-section {
  border-color: rgba(164, 127, 49, .18);
  background:
    radial-gradient(circle at 10% 50%, rgba(208, 170, 87, .14), transparent 31%),
    linear-gradient(180deg, #fffdf7, #fbf8ee);
}
.vip-section::before {
  opacity: .42;
  background-image: linear-gradient(90deg, rgba(168, 128, 47, .08) 1px, transparent 1px);
}
.catalog-header.is-light .section-kicker { color: #9b741f; }
.catalog-header.is-light .catalog-badge { background: rgba(184, 139, 47, .07); }
.catalog-header.is-light .catalog-badge span { color: #9c731d; }
.catalog-search.is-gold { background: rgba(255, 255, 255, .74); }
.vip-feature {
  border-color: rgba(167, 126, 41, .2);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 30px 80px rgba(101, 79, 35, .13);
}
.vip-feature-art {
  border-color: rgba(171, 130, 42, .18);
  background:
    radial-gradient(circle at 60% 55%, rgba(201, 160, 73, .2), transparent 28%),
    linear-gradient(155deg, rgba(217, 184, 110, .18), transparent 53%),
    #fbf7eb;
}
.feature-label { color: #8b6c2b; }
.vip-feature-art > h3 { color: #423319; }
.vip-feature-art > p { color: #8a713d; }
.feature-cube {
  background: linear-gradient(135deg, rgba(223, 190, 111, .25), rgba(255, 255, 255, .36));
  box-shadow: inset 0 0 55px rgba(194, 151, 54, .11), 0 35px 70px rgba(94, 73, 31, .13);
}
.feature-play { color: #89691f; }
.curriculum-heading h3 { color: #3b3324; }
.curriculum-heading p,
.curriculum li p { color: #7d715b; }
.curriculum li h4 { color: #413a2d; }
.curriculum li > span,
.curriculum li > small { color: #8d743b; }
.curriculum li { border-color: rgba(163, 126, 49, .14); }
.curriculum-open { background: rgba(182, 139, 48, .09); color: #86651d; }
.outline-button { background: rgba(184, 141, 52, .06); color: #76591b; }

.aiops-section {
  background:
    radial-gradient(circle at 78% 34%, rgba(15, 183, 176, .08), transparent 27%),
    #f6fbfb;
}
.catalog-search.is-cyan { background: rgba(255, 255, 255, .75); }
.public-course-empty {
  border-color: rgba(43, 99, 175, .22);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 18px 55px rgba(37, 78, 137, .07);
}
.public-course-empty h3 { color: #183453; }
.public-course-empty p { color: #6a7f9b; }
.aiops-statement {
  border-color: rgba(7, 154, 149, .18);
  background:
    radial-gradient(circle at 50% 70%, rgba(27, 199, 190, .15), transparent 36%),
    linear-gradient(150deg, rgba(77, 207, 201, .13), transparent 54%),
    #eaf9f7;
}
.aiops-statement > p { color: #168c88; }
.aiops-statement > h3 { color: #173f4a; }
.statement-flow span { color: #128e8a; }
.mini-course {
  border-color: rgba(31, 104, 142, .13);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 42px rgba(38, 95, 119, .07);
}
.mini-course h3 { color: #16364c; }
.mini-course > p { color: #647d91; }
.mini-index { color: #7890a3; }
.mini-icon { background: rgba(14, 177, 170, .08); color: #0a918d; }
.mini-course > small { color: #148f8b; }
.mini-course footer span { color: #778b9c; }
.mini-course footer button { color: #078c88; }

.closing-section {
  border-top: 1px solid rgba(38, 85, 149, .1);
  background:
    radial-gradient(circle at 50% 50%, rgba(55, 133, 239, .16), transparent 29%),
    linear-gradient(180deg, #eff6ff, #f9fbff);
}
.closing-section > p { color: #5275a3; }
.closing-section h2 { color: #132b49; }
.closing-orbit i { border-color: rgba(46, 108, 194, .13); }
.site-footer { color: #17304f; }
.footer-brand span { color: #71839b; }
.site-footer > p,
.site-footer nav a { color: #617692; }
.site-footer nav a:hover { color: #155fca; }
.site-footer > small { color: #7c8da3; }

.course-dialog {
  border-color: rgba(43, 99, 175, .22);
  background: #f8fbff;
  color: #152e4d;
  box-shadow: 0 50px 150px rgba(26, 58, 103, .3), 0 0 80px rgba(47, 126, 237, .1);
}
.course-dialog::backdrop { background: rgba(29, 48, 75, .42); }
.course-dialog-shell {
  background:
    radial-gradient(circle at 82% 22%, rgba(44, 123, 238, .11), transparent 34%),
    linear-gradient(145deg, #fff, #f0f6ff);
}
.course-dialog-shell::before {
  background-image:
    linear-gradient(rgba(53, 105, 175, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 105, 175, .045) 1px, transparent 1px);
}
.course-dialog-topbar { background: rgba(250, 252, 255, .9); }
.course-dialog-topbar > div > span { color: #234e82; }
.course-dialog-topbar small { color: #71839c; }
.course-dialog-topbar > button { background: #fff; }
.course-dialog-topbar > button span { background: #526985; }
.course-dialog-intro h2 { color: #132b49; }
.course-dialog-intro > div > p { color: #5e7390; }
.course-outline { background: rgba(255, 255, 255, .72); }
.course-outline h3,
.course-video-panel h3 { color: #173352; }
.course-outline li { color: #536c8b; }
.course-outline li span { color: #4271a9; }
.course-video-panel > header p { color: #667c99; }
.external-video-link { background: rgba(39, 111, 216, .07); color: #1e61ae; }

@media (max-width: 900px) {
  .site-header { background: rgba(248, 251, 255, .9); }
  .menu-toggle { background: rgba(255, 255, 255, .7); }
  .menu-toggle span { background: #425b7b; }
  .mobile-nav { background: rgba(248, 251, 255, .98); }
  .mobile-nav a { color: #405a7b; }
  .mobile-language-switcher a { color: #6a7f9b; }
  .mobile-language-switcher a.is-active { background: rgba(39, 112, 216, .08); color: #145fca; }
}