/* extracted style 1 */
:root {
      --bg: #130f25;
      --bg-2: #1b1633;
      --panel: rgba(30, 20, 52, 0.52);
      --panel-strong: rgba(27, 18, 47, 0.8);
      --panel-soft: rgba(255, 255, 255, 0.04);
      --line: rgba(220, 204, 255, 0.10);
      --line-strong: rgba(232, 220, 255, 0.18);
      --text: #eef3ff;
      --muted: #9fa9c6;
      --soft: #c8d1ea;
      --accent: #b07bff;
      --accent-2: #6fb7ff;
      --accent-3: #ffcf75;
      --danger: #ff8f9b;
      --shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
      --radius: 22px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 18% 14%, rgba(168, 106, 255, 0.28), transparent 34%),
        radial-gradient(circle at 76% 12%, rgba(93, 122, 255, 0.18), transparent 28%),
        radial-gradient(circle at 66% 68%, rgba(255, 74, 143, 0.12), transparent 22%),
        linear-gradient(180deg, #21153c 0%, #160f2a 42%, #120d22 100%);
      overflow-x: hidden;
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: auto;
      z-index: 0;
      pointer-events: none;
      filter: blur(90px);
      opacity: 0.6;
      animation: drift 18s ease-in-out infinite alternate;
    }
    body::before {
      width: 420px;
      height: 420px;
      left: 18%;
      top: 10%;
      background: radial-gradient(circle, rgba(173, 95, 255, 0.32) 0%, rgba(173, 95, 255, 0) 72%);
    }
    body::after {
      width: 360px;
      height: 360px;
      right: 6%;
      bottom: 6%;
      background: radial-gradient(circle, rgba(69, 163, 255, 0.22) 0%, rgba(69, 163, 255, 0) 70%);
      animation-duration: 22s;
    }
    @keyframes drift {
      0% { transform: translate3d(0, 0, 0) scale(1); }
      100% { transform: translate3d(16px, -18px, 0) scale(1.08); }
    }
    #sky {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.2;
    }
    .aurora {
      position: fixed;
      z-index: 0;
      pointer-events: none;
      border-radius: 50%;
      mix-blend-mode: screen;
      filter: blur(78px);
      opacity: 0.22;
      will-change: transform, opacity;
    }
    .aurora-a {
      width: 420px;
      height: 420px;
      left: 14%;
      top: 18%;
      background: radial-gradient(circle, rgba(216, 112, 255, 0.42) 0%, rgba(216, 112, 255, 0.18) 32%, rgba(216, 112, 255, 0) 72%);
      animation: floatGlowA 18s ease-in-out infinite alternate;
    }
    .aurora-b {
      width: 340px;
      height: 340px;
      right: 8%;
      top: 10%;
      background: radial-gradient(circle, rgba(95, 161, 255, 0.34) 0%, rgba(95, 161, 255, 0.14) 34%, rgba(95, 161, 255, 0) 70%);
      animation: floatGlowB 22s ease-in-out infinite alternate;
    }
    .aurora-c {
      width: 380px;
      height: 380px;
      right: 20%;
      bottom: 6%;
      background: radial-gradient(circle, rgba(255, 103, 192, 0.24) 0%, rgba(255, 103, 192, 0.10) 34%, rgba(255, 103, 192, 0) 74%);
      animation: floatGlowC 26s ease-in-out infinite alternate;
    }
    .noise {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(circle at center, black 38%, transparent 92%);
      opacity: 0.18;
    }
    @keyframes floatGlowA {
      0% { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.16; }
      50% { transform: translate3d(26px, -18px, 0) scale(1.05); opacity: 0.25; }
      100% { transform: translate3d(-10px, 22px, 0) scale(1.02); opacity: 0.18; }
    }
    @keyframes floatGlowB {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.13; }
      50% { transform: translate3d(-22px, 20px, 0) scale(1.08); opacity: 0.2; }
      100% { transform: translate3d(12px, -14px, 0) scale(0.98); opacity: 0.15; }
    }
    @keyframes floatGlowC {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.08; }
      50% { transform: translate3d(18px, -28px, 0) scale(1.06); opacity: 0.14; }
      100% { transform: translate3d(-16px, 10px, 0) scale(0.97); opacity: 0.1; }
    }
    @keyframes heroToneShift {
      0%, 100% { filter: hue-rotate(0deg) saturate(1.04); opacity: 1; }
      33% { filter: hue-rotate(46deg) saturate(1.28); opacity: 0.92; }
      66% { filter: hue-rotate(-38deg) saturate(1.20); opacity: 0.96; }
    }
    @keyframes quoteGalaxyDrift {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); filter: hue-rotate(0deg); opacity: 0.58; }
      50% { transform: translate3d(-14px, 6px, 0) scale(1.04); filter: hue-rotate(18deg); opacity: 0.72; }
    }
    .app {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }
    aside {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 28px 18px 20px;
      background: rgba(28, 18, 46, 0.72);
      border-right: 1px solid var(--line);
      backdrop-filter: blur(24px) saturate(135%);
      box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
    }
    .logo {
      padding: 6px 8px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      margin-bottom: 18px;
    }
    .logo b {
      display: block;
      font-size: 26px;
      line-height: 1.05;
      letter-spacing: -0.04em;
      background: linear-gradient(135deg, #6cbcff, #86ffd8 58%, #ffe173);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .logo a,
    .home-crumb {
      color: inherit;
      text-decoration: none;
    }
    .logo a {
      display: block;
    }
    .logo span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }
    .menu-title {
      margin: 18px 10px 10px;
      color: #7f89a5;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .menu {
      display: grid;
      gap: 8px;
    }
    .menu a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 14px;
      border-radius: 16px;
      color: var(--soft);
      text-decoration: none;
      transition: 0.18s ease;
      border: 1px solid transparent;
    }
    .menu a:hover, .menu a.active {
      background: rgba(255,255,255,0.05);
      border-color: var(--line);
      color: #fff;
      transform: translateX(2px);
    }
    .menu-icon {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
      background: linear-gradient(135deg, rgba(118, 167, 255, 0.38), rgba(132, 240, 198, 0.22));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .menu small {
      display: block;
      color: var(--muted);
      margin-top: 3px;
      font-size: 12px;
    }
    .sidebar-foot {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.03);
    }
    .sidebar-foot b {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
    }
    .sidebar-foot span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }
    .main {
      padding: 22px 22px 54px;
    }
    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }
    .crumb {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--soft);
      font-size: 14px;
    }
    .home-crumb {
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 8px;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .home-crumb:hover {
      color: var(--accent);
    }
    .crumb-badge {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .topmeta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .pill {
      border: 1px solid var(--line);
      background: rgba(15, 23, 38, 0.42);
      backdrop-filter: blur(20px) saturate(135%);
      color: var(--muted);
      border-radius: 999px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .pill {
      padding: 12px 18px;
      font-size: 14px;
    }
    .hero {
      position: relative;
      overflow: hidden;
      min-height: 360px;
      padding: 28px 28px 22px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        radial-gradient(circle at 18% 20%, rgba(164, 92, 255, 0.18), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(74, 128, 255, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(42, 24, 70, 0.72), rgba(60, 28, 84, 0.36)),
        linear-gradient(180deg, rgba(13,10,24,0.20), rgba(13,10,24,0.28));
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px) saturate(140%);
      margin-bottom: 18px;
    }
    .hero-bg-slides {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .hero-bg-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.03);
      transition: opacity 0.9s ease, transform 5s ease;
    }
    .hero-bg-slide.active {
      opacity: 1;
      transform: scale(1);
    }
    .hero-bg-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 26% 28%, rgba(255, 128, 198, 0.18), transparent 30%),
        radial-gradient(circle at 72% 24%, rgba(97, 184, 255, 0.16), transparent 34%),
        linear-gradient(90deg, rgba(22, 12, 39, 0.08) 0%, rgba(38, 18, 65, 0.26) 44%, rgba(48, 24, 78, 0.78) 62%, rgba(39, 22, 67, 0.92) 100%),
        linear-gradient(180deg, rgba(20, 12, 34, 0.18), rgba(28, 15, 46, 0.10) 40%, rgba(18, 11, 31, 0.48) 100%),
        radial-gradient(circle at 18% 72%, rgba(176, 123, 255, 0.18), transparent 34%),
        radial-gradient(circle at 62% 36%, rgba(111, 183, 255, 0.08), transparent 26%);
      animation: heroToneShift 10s ease-in-out infinite;
      will-change: filter, opacity;
    }
    .hero-bg-slide img {
      width: min(64%, 860px);
      height: 100%;
      object-fit: cover;
      object-position: 42% 52%;
      display: block;
      filter: saturate(1.02) brightness(0.86);
      opacity: 0.72;
      mask-image: linear-gradient(90deg, black 0%, black 60%, rgba(0,0,0,0.70) 78%, transparent 100%);
    }
    .hero-network {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      opacity: 0.9;
    }
    .hero-top {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: start;
      margin-bottom: 28px;
      position: relative;
      z-index: 1;
    }
    .hero-quote {
      position: relative;
      max-width: 520px;
      margin-left: auto;
      padding: 28px 28px 24px;
      text-align: left;
      color: #f3c86b;
      line-height: 1.65;
      font-size: 17px;
      font-weight: 600;
      text-shadow: 0 0 18px rgba(243, 200, 107, 0.08);
      isolation: isolate;
    }
    .hero-quote::before {
      content: "";
      position: absolute;
      inset: -36px -44px -30px -52px;
      z-index: 0;
      border-radius: 32px;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 20%, rgba(255, 221, 142, 0.75) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 34%, rgba(141, 221, 255, 0.65) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 24%, rgba(255, 132, 190, 0.62) 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 82% 62%, rgba(255, 242, 208, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle at 58% 46%, rgba(115, 203, 255, 0.22), transparent 24%),
        radial-gradient(circle at 74% 26%, rgba(255, 121, 188, 0.18), transparent 26%),
        linear-gradient(135deg, rgba(3, 45, 74, 0.52), rgba(25, 17, 76, 0.36) 48%, rgba(14, 9, 41, 0.20));
      background-size:
        118px 92px,
        142px 112px,
        180px 136px,
        126px 98px,
        auto,
        auto,
        auto;
      mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 88%, transparent 100%);
      animation: quoteGalaxyDrift 10s ease-in-out infinite;
    }
    .hero-quote::after {
      content: "";
      position: absolute;
      inset: -26px -34px -20px -44px;
      z-index: 1;
      border-radius: 30px;
      pointer-events: none;
      background:
        linear-gradient(28deg, transparent 16%, rgba(106, 222, 255, 0.28) 16.5%, transparent 18.5%),
        linear-gradient(144deg, transparent 58%, rgba(255, 214, 120, 0.25) 58.5%, transparent 60%),
        linear-gradient(180deg, rgba(18, 14, 48, 0.06), rgba(14, 10, 34, 0.30));
      opacity: 0.55;
    }
    .hero-quote .quote-main {
      display: block;
      letter-spacing: 0.01em;
    }
    .hero-quote .quote-source {
      display: block;
      margin-top: 14px;
      color: #f3c86b;
      font-weight: 500;
      font-size: 13px;
      opacity: 0.88;
      text-align: right;
    }
    .hero-photo-reel {
      position: absolute;
      left: clamp(34px, 6vw, 92px);
      top: 72px;
      width: clamp(260px, 34vw, 540px);
      height: 220px;
      z-index: 1;
      pointer-events: none;
      border-radius: 28px;
      overflow: hidden;
      opacity: 0.78;
      mask-image: linear-gradient(90deg, black 0%, black 68%, transparent 100%);
    }
    .hero-reel-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.04);
      transition: opacity 1.1s ease, transform 6s ease;
    }
    .hero-reel-slide.active {
      opacity: 1;
      transform: scale(1);
    }
    .hero-reel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: saturate(1.02) brightness(0.86);
    }
    .hero-photo-reel::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(20, 12, 34, 0.08), rgba(33, 18, 55, 0.20) 60%, rgba(39, 22, 67, 0.74)),
        linear-gradient(180deg, rgba(15, 10, 25, 0.04), rgba(15, 10, 25, 0.36));
    }
    .hero-tabs {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 154px;
      margin-bottom: 32px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .hero-tabs button {
      appearance: none;
      border: 1px solid rgba(132, 229, 255, 0.18);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(116, 82, 255, 0.18), rgba(25, 218, 255, 0.06)),
        rgba(12, 16, 34, 0.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 18px rgba(113, 186, 255, 0.08),
        0 12px 32px rgba(5, 8, 22, 0.22);
      color: #dbe8ff;
      font: inherit;
      font-size: 19px;
      font-weight: 700;
      padding: 11px 24px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      opacity: 0.74;
      backdrop-filter: blur(16px) saturate(150%);
      text-shadow: 0 0 12px rgba(126, 215, 255, 0.16);
      transition: transform 0.18s ease, opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }
    .hero-tabs button::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,0.04);
      pointer-events: none;
    }
    .hero-tabs button:hover {
      opacity: 0.95;
      transform: translateY(-1px);
      border-color: rgba(114, 229, 255, 0.42);
      background:
        linear-gradient(135deg, rgba(150, 91, 255, 0.26), rgba(34, 220, 255, 0.12)),
        rgba(15, 22, 44, 0.46);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 0 1px rgba(143, 118, 255, 0.08),
        0 0 26px rgba(59, 202, 255, 0.14),
        0 16px 34px rgba(5, 8, 22, 0.28);
    }
    .hero-tabs button.active {
      opacity: 1;
      color: #fff;
      border-color: rgba(135, 239, 255, 0.56);
      background:
        linear-gradient(135deg, rgba(164, 95, 255, 0.34), rgba(41, 223, 255, 0.16)),
        rgba(14, 22, 48, 0.62);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 0 22px rgba(126, 215, 255, 0.12),
        0 0 32px rgba(126, 215, 255, 0.18),
        0 18px 42px rgba(5, 8, 22, 0.30);
    }
    .hero-tabs button.active::after {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 5px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .search-wrap {
      max-width: 1080px;
      margin: 0 auto 18px;
      position: relative;
      z-index: 1;
    }
    .search-wrap input {
      width: 100%;
      border: 1px solid rgba(202, 214, 255, 0.16);
      border-radius: 999px;
      padding: 20px 72px 20px 24px;
      background: rgba(12, 16, 32, 0.66);
      color: #fff;
      font: inherit;
      font-size: 18px;
      backdrop-filter: blur(18px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .search-wrap button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(118, 167, 255, 0.34));
      color: #fff;
      font-size: 22px;
      cursor: pointer;
    }
    .notice {
      max-width: 840px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-radius: 999px;
      background: rgba(72, 46, 112, 0.36);
      border: 1px solid rgba(230, 214, 255, 0.10);
      color: #dbe7ff;
      backdrop-filter: blur(14px);
      position: relative;
      z-index: 1;
    }
    .notice strong {
      color: #fff;
      font-size: 14px;
    }
    .content-section {
      margin-top: 22px;
    }
    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 14px;
    }
    .section-head h2 {
      margin: 0;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section-head h2::before {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 5px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      opacity: 0.92;
    }
    .section-head span {
      color: var(--muted);
      font-size: 13px;
    }
    .card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .card {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(130, 224, 255, 0.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
        radial-gradient(circle at 12% 10%, rgba(151, 95, 255, 0.18), transparent 34%),
        rgba(18, 14, 38, 0.66);
      backdrop-filter: blur(24px) saturate(150%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 18px 48px rgba(4, 7, 20, 0.34),
        0 0 38px rgba(91, 80, 255, 0.08);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      min-height: 284px;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(136, 232, 255, 0.18), transparent),
        linear-gradient(rgba(132, 229, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 229, 255, 0.035) 1px, transparent 1px);
      background-size: 120% 100%, 34px 34px, 34px 34px;
      background-position: -140% 0, center, center;
      opacity: 0.28;
      mix-blend-mode: screen;
      transition: background-position 0.55s ease, opacity 0.2s ease;
    }
    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(137, 93, 255, 0.42), transparent 26%, transparent 72%, rgba(68, 220, 255, 0.32));
      opacity: 0.28;
    }
    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(126, 229, 255, 0.42);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.016)),
        radial-gradient(circle at 18% 12%, rgba(170, 104, 255, 0.24), transparent 36%),
        rgba(20, 16, 44, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 0 1px rgba(126, 229, 255, 0.08),
        0 0 34px rgba(84, 203, 255, 0.16),
        0 30px 82px rgba(4, 7, 20, 0.42);
    }
    .card:hover::before {
      background-position: 140% 0, center, center;
      opacity: 0.46;
    }
    .card {
      border-radius: 18px;
      border-color: rgba(115, 237, 255, 0.22);
      background:
        linear-gradient(145deg, rgba(255,255,255,0.070), rgba(255,255,255,0.012) 48%, rgba(77, 230, 255, 0.030)),
        radial-gradient(circle at 18% 10%, rgba(85, 229, 255, 0.20), transparent 30%),
        radial-gradient(circle at 86% 82%, rgba(159, 87, 255, 0.18), transparent 34%),
        rgba(7, 13, 31, 0.76);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(104, 232, 255, 0.10),
        0 0 0 1px rgba(113, 235, 255, 0.035),
        0 22px 54px rgba(0, 4, 16, 0.44),
        0 0 34px rgba(49, 214, 255, 0.10);
    }
    .card::before {
      background:
        linear-gradient(90deg, transparent, rgba(136, 232, 255, 0.26), transparent),
        linear-gradient(rgba(132, 229, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 229, 255, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, rgba(95, 223, 255, 0.22) 0 1px, transparent 1px 18px);
      background-size: 118% 100%, 30px 30px, 30px 30px, 18px 18px;
      opacity: 0.34;
    }
    .card::after {
      inset: 1px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,0.035);
      background:
        linear-gradient(90deg, rgba(106, 232, 255, 0.68), transparent 18%, transparent 82%, rgba(178, 111, 255, 0.58)) top left / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(106, 232, 255, 0.52), transparent 22%, transparent 78%, rgba(178, 111, 255, 0.46)) top left / 1px 100% no-repeat,
        linear-gradient(180deg, transparent, rgba(77, 230, 255, 0.045));
      opacity: 0.56;
    }
    .card:hover {
      transform: translateY(-5px) scale(1.01);
      border-color: rgba(126, 240, 255, 0.62);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(104, 232, 255, 0.16),
        0 0 0 1px rgba(126, 229, 255, 0.10),
        0 0 30px rgba(58, 222, 255, 0.20),
        0 34px 88px rgba(0, 4, 16, 0.50);
    }
    .card a {
      color: inherit;
      text-decoration: none;
      display: block;
      height: 100%;
    }
    .thumb {
      height: 168px;
      position: relative;
      z-index: 1;
      padding: 18px;
      display: flex;
      align-items: end;
      background:
        radial-gradient(circle at 50% 40%, rgba(141, 91, 255, 0.32), transparent 24%),
        radial-gradient(circle at 72% 26%, rgba(42, 220, 255, 0.22), transparent 26%),
        linear-gradient(135deg, rgba(12, 16, 40, 0.96), rgba(42, 24, 86, 0.72) 58%, rgba(5, 10, 26, 0.96));
      overflow: hidden;
    }
    .thumb {
      border-bottom: 1px solid rgba(125, 236, 255, 0.16);
      background:
        radial-gradient(circle at 50% 40%, rgba(80, 232, 255, 0.28), transparent 24%),
        radial-gradient(circle at 72% 26%, rgba(166, 96, 255, 0.28), transparent 26%),
        linear-gradient(135deg, rgba(4, 10, 28, 0.98), rgba(12, 38, 76, 0.76) 52%, rgba(5, 10, 26, 0.98));
    }
    .thumb.dark {
      background:
        radial-gradient(circle at 50% 38%, rgba(182, 88, 255, 0.32), transparent 25%),
        radial-gradient(circle at 74% 22%, rgba(47, 224, 255, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(5, 10, 28, 0.98), rgba(40, 24, 88, 0.76), rgba(4, 9, 24, 0.98));
    }
    .thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(180deg, rgba(5, 8, 20, 0.16) 0%, rgba(8, 10, 24, 0.30) 46%, rgba(4, 7, 16, 0.90) 100%),
        radial-gradient(circle at 50% 40%, rgba(148, 100, 255,0.28), transparent 32%),
        var(--art);
      background-repeat: no-repeat;
      background-position: center, left top, center;
      background-size: cover, auto, 60%;
      opacity: 0.95;
      filter: saturate(1.12) contrast(1.02) brightness(0.82);
      pointer-events: none;
    }
    .thumb::before {
      background-size: cover, auto, 48%;
      filter: saturate(1.22) contrast(1.08) brightness(0.88) drop-shadow(0 0 18px rgba(95, 230, 255, 0.24));
    }
    .thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 0%, rgba(7, 10, 18, 0.24) 48%, rgba(7, 10, 18, 0.88) 100%),
        repeating-linear-gradient(0deg, rgba(126, 229, 255, 0.035) 0 1px, transparent 1px 7px),
        linear-gradient(110deg, transparent 8%, rgba(117, 235, 255, 0.18) 9%, transparent 10%, transparent 76%, rgba(161, 104, 255, 0.16) 77%, transparent 78%);
      mix-blend-mode: screen;
    }
    .thumb::after {
      background:
        radial-gradient(circle at 50% 42%, transparent 0 42px, rgba(89, 231, 255, 0.16) 43px 45px, transparent 46px),
        linear-gradient(180deg, transparent 0%, rgba(7, 10, 18, 0.20) 48%, rgba(7, 10, 18, 0.86) 100%),
        repeating-linear-gradient(0deg, rgba(126, 229, 255, 0.045) 0 1px, transparent 1px 7px),
        linear-gradient(110deg, transparent 8%, rgba(117, 235, 255, 0.24) 9%, transparent 10%, transparent 76%, rgba(161, 104, 255, 0.20) 77%, transparent 78%);
    }
    .tag {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(120, 90, 255, 0.28), rgba(32, 215, 255, 0.14)),
        rgba(4, 10, 24, 0.58);
      border: 1px solid rgba(129, 232, 255, 0.24);
      font-size: 12px;
      color: #eef8ff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(101, 211, 255, 0.12);
      backdrop-filter: blur(14px) saturate(150%);
      text-shadow: 0 0 12px rgba(126, 229, 255, 0.26);
    }
    .tag {
      border-radius: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background:
        linear-gradient(135deg, rgba(20, 243, 255, 0.20), rgba(151, 91, 255, 0.18)),
        rgba(2, 10, 24, 0.68);
      border-color: rgba(129, 232, 255, 0.40);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 20px rgba(101, 211, 255, 0.18);
    }
    .card-body {
      position: relative;
      z-index: 1;
      padding: 16px 16px 18px;
    }
    .card-body::before {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(126, 229, 255, 0.40), transparent);
    }
    .card-body h3 {
      margin: 0 0 8px;
      font-size: 18px;
      line-height: 1.35;
      text-shadow: 0 0 16px rgba(128, 217, 255, 0.12);
    }
    .card-body p {
      margin: 0 0 14px;
      color: var(--muted);
      line-height: 1.75;
      font-size: 14px;
      min-height: 72px;
    }
    .meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #9fb7e8;
      font-size: 12px;
    }
    .status-block {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .status-card {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(16, 22, 38, 0.5);
      backdrop-filter: blur(22px);
      min-height: 124px;
    }
    .status-top {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
    }
    .light {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent-3);
      box-shadow: 0 0 0 8px rgba(255,212,110,0.10);
      flex: 0 0 auto;
    }
    .light.ok {
      background: var(--accent-2);
      box-shadow: 0 0 0 8px rgba(132,240,198,0.10);
    }
    .light.bad {
      background: var(--danger);
      box-shadow: 0 0 0 8px rgba(255,143,155,0.12);
    }
    .status-card b {
      display: block;
      font-size: 16px;
      margin-bottom: 6px;
    }
    .status-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 13px;
    }
    .copy, .button {
      appearance: none;
      border: 1px solid rgba(126, 229, 255, 0.24);
      background:
        linear-gradient(135deg, rgba(142, 98, 255, 0.22), rgba(41, 220, 255, 0.10)),
        rgba(9, 15, 32, 0.62);
      color: var(--text);
      border-radius: 999px;
      padding: 10px 14px;
      font: inherit;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      text-decoration: none;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 18px rgba(78, 202, 255, 0.08);
      backdrop-filter: blur(14px) saturate(150%);
    }
    .copy {
      color: #8be9ff;
      padding: 7px 12px;
    }
    .copy:hover, .button:hover {
      transform: translateY(-1px);
      border-color: rgba(139, 233, 255, 0.48);
      background:
        linear-gradient(135deg, rgba(164, 96, 255, 0.32), rgba(41, 220, 255, 0.18)),
        rgba(11, 18, 40, 0.70);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 0 28px rgba(78, 202, 255, 0.16);
    }
    .prompt-folders {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .prompt-folder {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      text-align: left;
      min-height: 74px;
      border-radius: 12px;
      border: 1px solid rgba(112, 180, 230, 0.28);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(218, 236, 250, 0.42)),
        rgba(255, 255, 255, 0.36);
      color: var(--text);
      padding: 14px 16px;
      cursor: pointer;
      text-decoration: none;
      box-shadow:
        0 14px 30px rgba(25, 66, 106, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(18px) saturate(140%);
      transform-origin: center;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      overflow: hidden;
    }
    .prompt-folder::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.46) 50%, transparent 62%, transparent 100%);
      transform: translateX(-120%);
      transition: transform 0.46s ease;
      pointer-events: none;
    }
    .prompt-folder:hover {
      transform: translateY(-5px) scale(1.06);
      border-color: rgba(76, 166, 224, 0.86);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(221, 241, 255, 0.58)),
        rgba(255, 255, 255, 0.46);
      box-shadow:
        0 28px 54px rgba(25, 66, 106, 0.28),
        0 0 0 5px rgba(102, 185, 238, 0.16),
        0 0 46px rgba(83, 172, 231, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      z-index: 2;
    }
    .prompt-folder:hover::before {
      transform: translateX(120%);
    }
    .prompt-folder:hover b {
      color: #0d6fa8;
    }
    .prompt-folder b {
      display: block;
      margin-bottom: 5px;
      font-size: 17px;
      color: #142033;
    }
    .prompt-folder span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .prompt-folder.active {
      border-color: #8fc8ef;
      background: #eef7ff;
      box-shadow: 0 10px 26px rgba(64, 132, 184, 0.14);
    }
    .prompt-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .prompt-detail {
      display: none;
      margin-top: 14px;
    }
    .prompt-detail.active {
      display: block;
    }
    .prompt-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .prompt-detail-head h3 {
      margin: 0;
      font-size: 18px;
    }
    .prompt-detail-head p {
      margin: 4px 0 0;
    }
    .prompt-item {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.72);
    }
    .prompt-item p {
      margin-top: 8px;
    }
    .model-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
      align-items: center;
    }
    .model-select {
      appearance: none;
      border: 1px solid rgba(175, 197, 255, 0.18);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      border-radius: 999px;
      padding: 11px 16px;
      font: inherit;
      min-width: 270px;
    }
    .model-select option {
      color: #08110f;
    }
    .footer {
      margin-top: 20px;
      padding: 16px 18px;
      color: var(--muted);
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(16, 22, 38, 0.38);
      backdrop-filter: blur(20px);
      font-size: 13px;
    }
    [data-group] {
      scroll-margin-top: 26px;
    }
    .hidden {
      display: none !important;
    }
    @media (max-width: 1280px) {
      .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .status-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      aside {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .sidebar-foot {
        position: static;
        margin-top: 16px;
      }
      .topbar, .hero-top {
        flex-direction: column;
        align-items: start;
      }
      .hero-quote {
        text-align: left;
        max-width: 100%;
      }
      .card-grid { grid-template-columns: 1fr; }
      .status-block { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      body {
        background:
          radial-gradient(circle at 28% 8%, rgba(168, 106, 255, 0.28), transparent 34%),
          radial-gradient(circle at 78% 24%, rgba(93, 122, 255, 0.16), transparent 28%),
          linear-gradient(180deg, #21153c 0%, #160f2a 48%, #120d22 100%);
      }
      .app {
        display: block;
      }
      aside {
        padding: 14px 12px 10px;
        background: rgba(28, 18, 46, 0.52);
        backdrop-filter: blur(18px) saturate(130%);
      }
      .logo {
        padding: 2px 4px 12px;
        margin-bottom: 10px;
      }
      .logo b {
        font-size: 22px;
        letter-spacing: -0.02em;
      }
      .menu-title,
      .sidebar-foot {
        display: none;
      }
      .menu {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 0 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }
      .menu::-webkit-scrollbar {
        display: none;
      }
      .menu + .menu {
        margin-top: 4px;
      }
      .menu a {
        flex: 0 0 auto;
        min-width: 104px;
        padding: 10px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,0.035);
        scroll-snap-align: start;
      }
      .menu a:hover,
      .menu a.active {
        transform: none;
      }
      .menu-icon {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        font-size: 12px;
      }
      .menu small {
        display: none;
      }
      .main {
        padding: 12px 10px 34px;
      }
      .topbar {
        margin-bottom: 10px;
      }
      .crumb {
        font-size: 13px;
      }
      .crumb-badge {
        width: 34px;
        height: 34px;
        border-radius: 12px;
      }
      .topmeta {
        display: none;
      }
      .hero {
        min-height: 520px;
        padding: 16px 12px 18px;
        border-radius: 22px;
        margin-bottom: 16px;
      }
      .hero-bg-slide::after {
        background:
          linear-gradient(180deg, rgba(20, 12, 34, 0.14) 0%, rgba(32, 16, 52, 0.20) 34%, rgba(39, 22, 67, 0.86) 63%, rgba(25, 14, 43, 0.96) 100%),
          radial-gradient(circle at 18% 28%, rgba(255, 128, 198, 0.18), transparent 30%),
          radial-gradient(circle at 76% 34%, rgba(97, 184, 255, 0.16), transparent 34%);
      }
      .hero-bg-slide img {
        width: 100%;
        height: 62%;
        object-position: 44% 44%;
        opacity: 0.9;
        mask-image: linear-gradient(180deg, black 0%, black 62%, rgba(0,0,0,0.84) 78%, transparent 100%);
      }
      .hero-top {
        display: block;
        margin-bottom: 0;
      }
      .hero-quote {
        max-width: 100%;
        margin: 0;
        padding: 215px 10px 8px;
        font-size: 16px;
        line-height: 1.58;
        text-align: left;
      }
      .hero-quote::before,
      .hero-quote::after {
        inset: 172px -10px -14px -10px;
        border-radius: 22px;
        opacity: 0.44;
      }
      .hero-quote .quote-source {
        margin-top: 10px;
        text-align: left;
        font-size: 12px;
      }
      .hero-photo-reel {
        left: 12px;
        right: 12px;
        top: 74px;
        width: auto;
        height: 178px;
        border-radius: 20px;
        opacity: 0.54;
        mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%);
      }
      .hero-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 34px;
        margin-bottom: 0;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scrollbar-width: none;
      }
      .hero-tabs::-webkit-scrollbar {
        display: none;
      }
      .hero-tabs button {
        flex: 0 0 auto;
        font-size: 16px;
        padding: 10px 18px;
        opacity: 0.9;
      }
      .hero-tabs button.active::after {
        left: 18px;
        right: 18px;
      }
      .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }
      .section-head h2 {
        font-size: 18px;
      }
      .card-grid {
        gap: 12px;
      }
      .card {
        min-height: auto;
        border-radius: 18px;
      }
      .thumb {
        height: 150px;
      }
      .card-body {
        padding: 14px;
      }
      .card-body p {
        min-height: auto;
      }
      .status-card {
        min-height: auto;
      }
      .model-select {
        width: 100%;
        min-width: 0;
      }
      .copy,
      .button {
        min-height: 42px;
      }
    }
    /* final visual override: stronger sci-fi module buttons */
    .menu a,
    .hero-tabs button,
    .copy,
    .button {
      border: 1px solid rgba(90, 235, 255, 0.42);
      background:
        linear-gradient(135deg, rgba(23, 246, 255, 0.18), rgba(137, 77, 255, 0.22)),
        linear-gradient(180deg, rgba(4, 13, 32, 0.92), rgba(8, 18, 44, 0.74));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 0 22px rgba(71, 229, 255, 0.12),
        0 0 0 1px rgba(90, 235, 255, 0.08),
        0 0 24px rgba(59, 221, 255, 0.16);
      text-shadow: 0 0 14px rgba(126, 235, 255, 0.44);
    }
    .hero-tabs button.active,
    .menu a.active {
      border-color: rgba(125, 250, 255, 0.78);
      background:
        linear-gradient(135deg, rgba(37, 248, 255, 0.30), rgba(159, 83, 255, 0.34)),
        rgba(5, 16, 39, 0.92);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 0 28px rgba(105, 234, 255, 0.20),
        0 0 34px rgba(75, 226, 255, 0.30),
        0 0 54px rgba(137, 82, 255, 0.20);
    }
    .card-grid .card {
      border-radius: 12px;
      border: 1px solid rgba(98, 241, 255, 0.46);
      background:
        linear-gradient(145deg, rgba(103, 242, 255, 0.10), rgba(255,255,255,0.020) 34%, rgba(153, 88, 255, 0.10)),
        linear-gradient(180deg, rgba(4, 13, 31, 0.92), rgba(6, 13, 34, 0.82));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 0 42px rgba(70, 221, 255, 0.10),
        0 0 0 1px rgba(99, 239, 255, 0.10),
        0 0 34px rgba(51, 220, 255, 0.18),
        0 28px 72px rgba(0, 4, 18, 0.58);
      clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    }
    .card-grid .card::before {
      opacity: 0.70;
      background:
        linear-gradient(100deg, transparent 0%, rgba(122, 248, 255, 0.30) 44%, transparent 58%),
        repeating-linear-gradient(0deg, rgba(98, 241, 255, 0.055) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(98, 241, 255, 0.045) 0 1px, transparent 1px 28px);
      background-size: 120% 100%, auto, auto;
      background-position: -140% 0, center, center;
    }
    .card-grid .card::after {
      inset: 0;
      border-radius: 0;
      border: 0;
      background:
        linear-gradient(90deg, #62f1ff, transparent 26%, transparent 74%, #9c63ff) top left / 100% 2px no-repeat,
        linear-gradient(90deg, #62f1ff, transparent 26%, transparent 74%, #9c63ff) bottom left / 100% 2px no-repeat,
        linear-gradient(180deg, #62f1ff, transparent 28%, transparent 72%, #9c63ff) top left / 2px 100% no-repeat,
        linear-gradient(180deg, #62f1ff, transparent 28%, transparent 72%, #9c63ff) top right / 2px 100% no-repeat;
      opacity: 0.78;
    }
    .card-grid .card:hover {
      transform: translateY(-7px) scale(1.018);
      border-color: rgba(139, 255, 255, 0.86);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 0 46px rgba(80, 238, 255, 0.18),
        0 0 42px rgba(65, 229, 255, 0.34),
        0 0 80px rgba(143, 84, 255, 0.22),
        0 36px 94px rgba(0, 4, 18, 0.62);
    }
    .card-grid .thumb {
      height: 156px;
      border-bottom: 1px solid rgba(112, 244, 255, 0.38);
      background:
        radial-gradient(circle at 50% 40%, rgba(95, 244, 255, 0.36), transparent 0 23%, transparent 34%),
        radial-gradient(circle at 50% 40%, transparent 0 58px, rgba(126, 248, 255, 0.26) 59px 62px, transparent 64px),
        linear-gradient(135deg, rgba(3, 9, 26, 0.98), rgba(10, 34, 76, 0.88) 52%, rgba(7, 8, 28, 0.98));
    }
    .card-grid .thumb::before {
      background-size: cover, auto, 42%;
      filter: saturate(1.35) contrast(1.15) brightness(0.92) drop-shadow(0 0 28px rgba(91, 238, 255, 0.52));
      opacity: 1;
    }
    .card-grid .thumb::after {
      background:
        radial-gradient(circle at 50% 40%, transparent 0 46px, rgba(120, 249, 255, 0.28) 47px 49px, transparent 51px),
        repeating-linear-gradient(0deg, rgba(105, 241, 255, 0.070) 0 1px, transparent 1px 6px),
        linear-gradient(112deg, transparent 8%, rgba(111, 246, 255, 0.38) 9%, transparent 10%, transparent 74%, rgba(176, 105, 255, 0.34) 75%, transparent 76%),
        linear-gradient(180deg, transparent 0%, rgba(2, 6, 18, 0.18) 45%, rgba(2, 6, 18, 0.88) 100%);
    }
    .card-grid .tag {
      border-radius: 6px;
      border-color: rgba(118, 250, 255, 0.72);
      color: #f2fdff;
      background:
        linear-gradient(135deg, rgba(32, 247, 255, 0.32), rgba(151, 91, 255, 0.24)),
        rgba(2, 8, 22, 0.78);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 22px rgba(83, 232, 255, 0.34);
    }
    .card-grid .card-body h3 {
      color: #f5fdff;
      text-shadow:
        0 0 12px rgba(98, 241, 255, 0.42),
        0 0 24px rgba(156, 99, 255, 0.20);
    }
    .card-grid .meta {
      color: #9ff6ff;
      border-top: 1px solid rgba(98, 241, 255, 0.14);
      padding-top: 10px;
    }

    /* FMHY-style override: dense wiki navigation, clear categories, low-glare cards */
    :root {
      --bg: #101114;
      --bg-2: #17191f;
      --panel: #171a21;
      --panel-strong: #1d212a;
      --panel-soft: #202532;
      --line: #2b3140;
      --line-strong: #394154;
      --text: #e7edf7;
      --muted: #98a2b3;
      --soft: #c2ccda;
      --accent: #7bc5e4;
      --accent-2: #8bd17c;
      --accent-3: #f0c76a;
      --shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
      --radius: 10px;
    }

    body {
      background: var(--bg);
      color: var(--text);
    }

    body::before,
    body::after,
    #sky,
    .aurora,
    .noise,
    .hero-network,
    .hero-photo-reel {
      display: none !important;
    }

    .app {
      width: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 276px minmax(0, 1fr);
      gap: 0;
      padding: 0;
    }

    aside {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 22px 16px;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: #14171d;
      box-shadow: none;
      overflow-y: auto;
    }

    .logo {
      padding: 0 6px 18px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 18px;
    }

    .logo a {
      border-radius: 8px;
      transition: background 0.18s ease;
    }

    .logo a:hover {
      background: rgba(75, 155, 216, 0.08);
    }

    .logo b {
      font-size: 20px;
      color: var(--text);
      background: none;
      -webkit-text-fill-color: currentColor;
    }

    .logo b::after {
      content: none;
      display: none;
    }

    .menu-title {
      margin: 18px 8px 8px;
      color: #7f8ba0;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .menu {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2px;
    }

    .menu a {
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      box-shadow: none;
      color: #cbd5e1;
      padding: 9px 10px;
    }

    .menu a:hover,
    .menu a.active {
      border-color: var(--line-strong);
      background: #1d222c;
      color: #ffffff;
      transform: none;
      box-shadow: none;
    }

    .menu-icon,
    .crumb-badge {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      border: 1px solid #354154;
      background: #202632;
      color: var(--accent);
      box-shadow: none;
      font-size: 13px;
    }

    .sidebar-foot {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #181c24;
      box-shadow: none;
    }

    .main {
      min-width: 0;
      padding: 0;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: rgba(16, 17, 20, 0.92);
      box-shadow: none;
      backdrop-filter: blur(14px);
      padding: 14px 24px;
    }

    .topmeta {
      gap: 8px;
    }

    .pill,
    .tag {
      border-radius: 6px;
      border: 1px solid #344052;
      background: #1b2029;
      color: #cbd5e1;
      box-shadow: none;
    }

    .search-wrap {
      max-width: 1180px;
      margin: 22px auto 0;
      padding: 0 24px;
    }

    .search-wrap input {
      width: 100%;
      height: 46px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 0 44px 0 16px;
      background: #171b22;
      color: var(--text);
      font-size: 15px;
      box-shadow: none;
    }

    .search-wrap button {
      right: 34px;
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: #222936;
      color: var(--accent);
      font-size: 15px;
      box-shadow: none;
    }

    .hero {
      max-width: 1180px;
      min-height: 280px;
      margin: 18px auto 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #151920;
      box-shadow: none;
      padding: 24px;
      isolation: isolate;
    }

    .hero-bg-slides {
      display: block !important;
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-bg-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 1.1s ease, transform 7s ease;
    }

    .hero-bg-slide.active {
      opacity: 1;
      transform: scale(1);
    }

    .hero-bg-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.58;
      filter: saturate(0.96) contrast(1.04) brightness(0.78);
      mask-image: none;
    }

    .hero-bg-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(14, 16, 20, 0.92) 0%, rgba(14, 16, 20, 0.72) 46%, rgba(14, 16, 20, 0.58) 100%),
        linear-gradient(180deg, rgba(14, 16, 20, 0.30), rgba(14, 16, 20, 0.88));
      animation: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%),
        radial-gradient(circle at 12% 16%, rgba(123, 197, 228, 0.18), transparent 34%);
      pointer-events: none;
    }

    .hero::before,
    .hero-top,
    .hero-tabs {
      position: relative;
      z-index: 1;
    }

    .hero::before {
      display: none;
    }

    .hero-top {
      align-items: flex-start;
      gap: 16px;
    }

    .hero-title::before {
      content: "私人资料库导航";
      display: block;
      color: #ffffff;
      font-size: 30px;
      font-weight: 800;
      line-height: 1.2;
    }

    .hero-quote {
      width: min(620px, 100%);
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--soft);
      padding: 0;
    }

    .hero-quote::before,
    .hero-quote::after {
      display: none;
    }

    .hero-quote .quote-main {
      color: var(--soft);
      font-size: 15px;
      line-height: 1.75;
    }

    .hero-quote .quote-source {
      color: var(--muted);
      font-size: 13px;
    }

    .hero-tabs {
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 18px;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      gap: 8px;
    }

    .hero-tabs button,
    .copy,
    .button {
      min-height: 36px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: #202632;
      color: #d9e3ef;
      box-shadow: none;
      text-shadow: none;
    }

    .hero-tabs button:hover,
    .hero-tabs button.active,
    .copy:hover,
    .button:hover {
      border-color: rgba(123, 197, 228, 0.72);
      background: #273141;
      color: #ffffff;
      transform: none;
      box-shadow: none;
    }

    .hero-tabs button.active::after {
      display: none;
    }

    .content-section {
      max-width: 1180px;
      margin: 26px auto 0;
      padding: 0 24px;
    }

    .section-head {
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .section-head h2 {
      font-size: 22px;
      color: #ffffff;
    }

    .section-head h2::before {
      width: 8px;
      height: 22px;
      border-radius: 3px;
      background: var(--accent);
    }

    .section-head span {
      color: var(--muted);
    }

    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .card-grid .card,
    .status-card {
      min-height: auto;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #171b22;
      clip-path: none;
      box-shadow: none;
    }

    .card-grid .card::before,
    .card-grid .card::after,
    .card-body::before {
      display: none;
    }

    .card-grid .card:hover,
    .status-card:hover {
      border-color: #46546b;
      background: #1c222c;
      transform: none;
      box-shadow: none;
    }

    .card-grid .card a {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      align-items: start;
      min-height: 126px;
    }

    .card-grid .card.compact a {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    .card-grid .card.compact .thumb {
      display: none;
    }

    .card-grid .card.compact .card-body {
      padding: 16px;
    }

    .card-grid .card.compact .card-body h3 {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-grid .card.compact .card-body h3::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(123, 197, 228, 0.10);
      flex: 0 0 auto;
    }

    .card-grid .thumb {
      width: 44px;
      height: 44px;
      margin: 18px 0 0 18px;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      background: #202632;
    }

    .card-grid .thumb::before {
      inset: 9px;
      background-size: contain;
      filter: none;
      opacity: 1;
    }

    .card-grid .thumb::after {
      display: none;
    }

    .card-grid .tag {
      display: none;
    }

    .card-body {
      padding: 16px 16px 14px 4px;
    }

    .card-grid .card-body h3 {
      margin-bottom: 7px;
      color: #ffffff;
      font-size: 17px;
      text-shadow: none;
    }

    .card-body p {
      min-height: 0;
      color: #aab5c5;
      font-size: 14px;
      line-height: 1.65;
    }

    .card-grid .meta {
      margin-top: 12px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      color: #7bc5e4;
      font-size: 12px;
    }

    .status-block {
      gap: 12px;
    }

    pre,
    .model-select {
      border-color: var(--line-strong);
      border-radius: 7px;
      background: #11141a;
      color: #d8e2ef;
    }

    .footer {
      max-width: 1180px;
      margin: 26px auto 38px;
      padding: 18px 24px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .app {
        grid-template-columns: 1fr;
      }

      aside {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .hero-tabs {
        flex-wrap: wrap !important;
        overflow: visible !important;
      }

      .hero-top {
        flex-direction: column;
      }
    }

    @media (max-width: 560px) {
      aside {
        padding: 18px 12px;
      }

      .topbar,
      .hero,
      .content-section,
      .search-wrap,
      .footer {
        padding-left: 14px;
        padding-right: 14px;
      }

      .hero-title::before {
        font-size: 24px;
      }

      .card-grid .card a {
        grid-template-columns: 56px minmax(0, 1fr);
      }
    }

    /* FMHY screenshot pass: light wiki layout with family-photo hero */
    :root {
      --bg: #f7f8fb;
      --bg-2: #ffffff;
      --panel: #ffffff;
      --panel-strong: #f1f4f8;
      --panel-soft: #eef3f8;
      --line: #d8dee8;
      --line-strong: #c4cedb;
      --text: #111827;
      --muted: #5d6878;
      --soft: #374151;
      --accent: #4b9bd8;
      --accent-2: #2f9e68;
      --accent-3: #d89c2f;
      --shadow: 0 14px 34px rgba(18, 28, 45, 0.08);
      --radius: 8px;
    }

    body {
      background: #f7f8fb;
      color: var(--text);
    }

    body::before,
    body::after,
    #sky,
    .aurora,
    .noise {
      display: none;
    }

    .page-photo-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: #f7f8fb;
    }

    .page-photo-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.14)),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(247,248,251,0.30) 72%, rgba(247,248,251,0.42));
    }

    .page-photo-bg span {
      position: absolute;
      inset: 0;
      opacity: 0;
      background-position: center;
      background-size: cover;
      filter: saturate(1.16) contrast(1.08) brightness(1.06);
      transform: scale(1.04);
      animation: pagePhotoFade 60s linear infinite;
    }

    .page-photo-bg span:nth-child(1) { background-image: url("/assets/carousel-web/slide-01.jpg"); animation-delay: 0s; }
    .page-photo-bg span:nth-child(2) { background-image: url("/assets/carousel-web/slide-02.jpg"); animation-delay: 6s; }
    .page-photo-bg span:nth-child(3) { background-image: url("/assets/carousel-web/slide-03.jpg"); animation-delay: 12s; }
    .page-photo-bg span:nth-child(4) { background-image: url("/assets/carousel-web/slide-04.jpg"); animation-delay: 18s; }
    .page-photo-bg span:nth-child(5) { background-image: url("/assets/carousel-web/slide-05.jpg"); animation-delay: 24s; }
    .page-photo-bg span:nth-child(6) { background-image: url("/assets/carousel-web/slide-06.jpg"); animation-delay: 30s; }
    .page-photo-bg span:nth-child(7) { background-image: url("/assets/carousel-web/slide-07.jpg"); animation-delay: 36s; }
    .page-photo-bg span:nth-child(8) { background-image: url("/assets/carousel-web/slide-08.jpg"); animation-delay: 42s; }
    .page-photo-bg span:nth-child(9) { background-image: url("/assets/carousel-web/slide-09.jpg"); animation-delay: 48s; }
    .page-photo-bg span:nth-child(10) { background-image: url("/assets/carousel-web/slide-10.jpg"); animation-delay: 54s; }

    @keyframes pagePhotoFade {
      0%, 10% { opacity: 0.90; transform: scale(1.04); }
      14%, 100% { opacity: 0; transform: scale(1.00); }
    }

    .app {
      background: rgba(247, 248, 251, 0.24);
      backdrop-filter: none;
    }

    aside {
      background: #ffffff;
      border-color: var(--line);
    }

    .logo b {
      color: #111827;
    }

    .logo b::after {
      border-color: #c9dff1;
      background: #eef7ff;
      color: #347fb7;
    }

    .menu-title,
    .logo span,
    .menu small,
    .sidebar-foot span,
    .topbar small,
    .section-head span,
    .card-body p,
    .footer {
      color: var(--muted) !important;
    }

    .menu a {
      color: #273244;
    }

    .menu a:hover,
    .menu a.active {
      border-color: #d5e2ef;
      background: #f1f6fb;
      color: #0f172a;
    }

    .menu-icon,
    .crumb-badge {
      border-color: #d5e2ef;
      background: #f1f6fb;
      color: #347fb7;
    }

    .sidebar-foot,
    .pill,
    .tag,
    .hero-tabs button,
    .copy,
    .button,
    pre,
    .model-select {
      border-color: var(--line);
      background: #f8fafc;
      color: #273244;
    }

    .topbar {
      background: rgba(255, 255, 255, 0.94);
      border-color: var(--line);
    }

    .search-wrap input {
      background: #ffffff;
      border-color: var(--line-strong);
      color: var(--text);
    }

    .search-wrap button {
      background: #111827;
      color: #ffffff;
    }

    .hero {
      background: #ffffff;
      border-color: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-bg-slide img {
      opacity: 0.9;
      filter: saturate(1.12) contrast(1.08) brightness(1.1);
    }

    .hero-bg-slide::after {
      background:
        linear-gradient(90deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.24) 45%, rgba(255,255,255,0.06) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.14));
    }

    .hero::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
    }

    .hero::before {
      border-color: #c9dff1;
      background: rgba(238, 247, 255, 0.86);
      color: #347fb7;
    }

    .hero-title::before,
    .section-head h2,
    .card-grid .card-body h3,
    .status-card b {
      color: #111827;
    }

    .hero-quote .quote-main {
      color: #263244;
    }

    .hero-quote .quote-source {
      color: #657386;
    }

    .hero-tabs button:hover,
    .hero-tabs button.active,
    .copy:hover,
    .button:hover {
      border-color: #9cc7e7;
      background: #eaf5ff;
      color: #155b8f;
    }

    .card-grid .card,
    .status-card {
      background: #ffffff;
      border-color: var(--line);
      box-shadow: none;
    }

    .card-grid .card:hover,
    .status-card:hover {
      background: #fbfdff;
      border-color: #bdd5ea;
    }

    .card-grid .thumb {
      border-color: #cbd7e6;
      background: #f1f6fb;
    }

    .card-grid .meta {
      border-color: #e3e9f1;
      color: #4b8fc4;
    }

    .card-grid .card.compact {
      border-color: transparent;
      background: transparent;
    }

    .card-grid .card.compact:hover {
      border-color: transparent;
      background: transparent;
    }

    .card-grid .card.compact .card-body {
      padding: 6px 0;
    }

    .card-grid .card.compact .card-body h3 {
      margin: 0 0 2px;
      color: #4b9bd8;
      font-size: 17px;
      font-weight: 700;
    }

    .card-grid .card.compact .card-body h3::before {
      background: #111827;
      box-shadow: none;
    }

    .card-grid .card.compact .card-body p {
      margin: 0 0 0 22px;
      color: #111827 !important;
    }

    .card-grid .card.compact .meta {
      display: none;
    }

    .site-directory {
      max-width: 1180px;
      margin: 16px auto 0;
      padding: 0 24px;
    }

    .directory-inner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #ffffff;
      overflow-x: auto;
      box-shadow: none;
    }

    .directory-label {
      flex: 0 0 auto;
      color: #657386;
      font-size: 13px;
      font-weight: 800;
    }

    .directory-inner a {
      flex: 0 0 auto;
      padding: 7px 11px;
      border: 1px solid #dbe6f1;
      border-radius: 7px;
      background: #f8fafc;
      color: #273244;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
    }

    .directory-inner a:hover {
      border-color: #9cc7e7;
      background: #eaf5ff;
      color: #155b8f;
    }

    .directory-board {
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #ffffff;
      overflow: hidden;
    }

    .directory-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }

    .directory-head h2 {
      margin: 0;
      color: #111827;
      font-size: 20px;
    }

    .directory-head span {
      color: #657386;
      font-size: 13px;
      font-weight: 700;
    }

    .directory-groups {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 14px;
    }

    .directory-group {
      min-height: 78px;
      border: 1px solid #dbe6f1;
      border-radius: 8px;
      background: #fbfdff;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .directory-group:hover {
      border-color: #9cc7e7;
      background: #f1f8ff;
      transform: translateY(-1px);
    }

    .directory-group h3,
    .detail-top h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: #111827;
      font-size: 16px;
    }

    .directory-mark {
      width: 26px;
      height: 26px;
      border: 1px solid #d5e2ef;
      border-radius: 7px;
      background: #f1f6fb;
      color: #347fb7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
    }

    .directory-links {
      display: grid;
      gap: 6px;
    }

    .directory-folder summary {
      min-height: 76px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 10px;
      padding: 14px;
      list-style: none;
      cursor: pointer;
    }

    .directory-folder summary::-webkit-details-marker {
      display: none;
    }

    .directory-folder summary h3 {
      margin-bottom: 0;
    }

    .directory-count {
      color: #657386;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .directory-folder .directory-links {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .directory-folder summary::after {
      content: "›";
      display: inline-flex;
      width: 26px;
      height: 26px;
      align-items: center;
      justify-content: center;
      border: 1px solid #dbe6f1;
      border-radius: 50%;
      background: #ffffff;
      color: #347fb7;
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
    }

    .directory-folder.is-open summary::after {
      content: "›";
      border-color: #9cc7e7;
      background: #ffffff;
      color: #155b8f;
    }

    .directory-folder .directory-links {
      display: none;
    }

    .directory-folder.is-open .directory-links {
      display: grid;
    }

    .directory-groups.is-detail {
      display: none;
    }

    .directory-groups.is-detail .directory-group:not(.is-open) {
      display: none;
    }

    .directory-detail,
    .category-detail {
      display: none;
      padding: 16px;
      scroll-margin-top: 150px;
    }

    .directory-detail.is-open,
    .category-detail.is-open {
      display: block;
    }

    .detail-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .detail-top h3 {
      margin: 0;
      color: #111827;
      font-size: 18px;
    }

    .detail-back {
      flex: 0 0 auto;
      border: 1px solid #dbe6f1;
      border-radius: 7px;
      background: #f8fafc;
      color: #273244;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      padding: 7px 10px;
    }

    .detail-back:hover {
      border-color: #9cc7e7;
      background: #eaf5ff;
      color: #155b8f;
    }

    .directory-links a {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 7px;
      color: #273244;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.35;
    }

    .directory-links a:hover {
      background: #eaf5ff;
      color: #155b8f;
    }

    .directory-links a::after {
      content: attr(data-kind);
      flex: 0 0 auto;
      color: #657386;
      font-size: 12px;
      font-weight: 700;
    }

    .category-list {
      display: grid;
      gap: 10px;
    }

    .category-panel {
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #ffffff;
      overflow: hidden;
    }

    .category-panel.is-open {
      border-color: #bdd5ea;
    }

    .category-summary {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      list-style: none;
    }

    .category-summary::-webkit-details-marker {
      display: none;
    }

    .category-icon {
      width: 34px;
      height: 34px;
      border: 1px solid #d5e2ef;
      border-radius: 8px;
      background: #f1f6fb;
      color: #347fb7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
    }

    .category-title {
      min-width: 0;
      flex: 1;
    }

    .category-title b {
      display: block;
      color: #111827;
      font-size: 17px;
    }

    .category-title span {
      display: block;
      margin-top: 3px;
      color: #657386;
      font-size: 13px;
    }

    .category-count {
      color: #657386;
      font-size: 13px;
      font-weight: 700;
    }

    .category-summary::after {
      content: "进入";
      padding: 6px 9px;
      border: 1px solid #dbe6f1;
      border-radius: 7px;
      background: #f8fafc;
      color: #273244;
      font-size: 13px;
      font-weight: 700;
    }

    .category-panel.is-open .category-summary::after {
      content: "返回";
      background: #eaf5ff;
      color: #155b8f;
      border-color: #9cc7e7;
    }

    .category-content {
      display: none;
      padding: 0 16px 16px;
    }

    .category-panel.is-open .category-content {
      display: block;
    }

    .category-list.is-detail {
      display: none;
    }

    .category-list.is-detail .category-panel:not(.is-open) {
      display: none;
    }

    .category-content .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 980px) {
      body {
        background: #f7f8fb;
      }

      [data-group] {
        scroll-margin-top: 158px;
      }

      .app {
        display: block;
      }

      aside {
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 0;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
      }

      .logo {
        height: 86px;
        margin: 0;
        padding: 0 32px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--line);
      }

      .logo a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .logo b {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 22px;
      }

      .logo b::before {
        content: "";
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background:
          radial-gradient(circle at 62% 48%, #ffffff 0 0, transparent 8px),
          conic-gradient(from 210deg, #8b5cf6, #22d3ee, #a3e635, #111827, #8b5cf6);
        box-shadow: inset 0 0 0 5px #111827;
      }

      .logo b::after {
        display: none;
      }

      aside > .logo + .menu-title {
        height: 62px;
        margin: 0;
        padding: 0 32px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--line);
        color: #111827;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
        user-select: none;
      }

      aside > .logo + .menu-title::before {
        content: "☰";
        margin-right: 12px;
        color: #111827;
      }

      aside > .logo + .menu-title::after {
        content: "本页 ›";
        margin-left: auto;
        color: #111827;
      }

      aside.is-mobile-nav-open > .logo + .menu-title::after {
        content: "收起 ×";
      }

      aside .menu,
      .sidebar-foot,
      .topbar {
        display: none !important;
      }

      aside > .menu-title {
        display: none !important;
      }

      aside > .logo + .menu-title {
        display: flex !important;
      }

      aside.is-mobile-nav-open .menu,
      aside.is-mobile-nav-open .sidebar-foot {
        display: block !important;
      }

      aside.is-mobile-nav-open .menu + .menu-title {
        display: block !important;
        margin: 14px 32px 8px;
      }

      aside.is-mobile-nav-open .menu {
        padding: 8px 24px 0;
      }

      aside.is-mobile-nav-open .menu a {
        margin-bottom: 10px;
      }

      aside.is-mobile-nav-open .sidebar-foot {
        margin: 16px 32px 4px;
      }

      .search-wrap {
        margin: 18px 0 0;
        padding: 0 32px;
      }

      .hero,
      .content-section,
      .site-directory,
      .footer {
        margin-left: 32px;
        margin-right: 32px;
        padding-left: 0;
        padding-right: 0;
      }

      .hero {
        min-height: 250px;
        padding: 28px 24px;
      }

      .hero-title::before {
        content: "私人导航";
        font-size: 34px;
        color: #4b9bd8;
      }

      .hero-tabs {
        display: none;
      }

      .section-head {
        margin-top: 34px;
      }

      .card-grid {
        display: block;
      }

      .card-grid .card {
        margin-bottom: 12px;
      }

      .card-grid .card.compact {
        margin-bottom: 4px;
      }

      .category-content .card-grid {
        display: block;
      }
    }

    @media (max-width: 560px) {
      .logo {
        height: 84px;
        padding: 0 32px;
      }

      .search-wrap,
      .hero,
      .content-section,
      .site-directory,
      .footer {
        margin-left: 32px;
        margin-right: 32px;
        padding-left: 0;
        padding-right: 0;
      }

      .hero {
        border-radius: 8px;
      }

      .hero::before {
        margin-bottom: 14px;
      }

      .hero-title::before {
        font-size: 31px;
      }

      .hero-quote .quote-main {
        font-size: 15px;
      }

      .section-head h2 {
        font-size: 25px;
      }

      .section-head h2::before {
        display: none;
      }

      .directory-inner {
        padding: 8px;
      }

      .directory-head {
        display: block;
      }

      .directory-head span {
        display: block;
        margin-top: 5px;
      }

      .directory-groups {
        grid-template-columns: 1fr;
      }

      .directory-group,
      .directory-group:nth-child(2n),
      .directory-group:nth-last-child(-n + 2) {
        border: 1px solid #dbe6f1;
      }

      .directory-group:last-child {
        border-bottom: 1px solid #dbe6f1;
      }

      .category-summary {
        padding: 13px 12px;
        gap: 9px;
      }

      .category-title b {
        font-size: 16px;
      }

      .category-title span,
      .category-count {
        font-size: 12px;
      }

      .card-grid .card a {
        grid-template-columns: 62px minmax(0, 1fr);
      }

      .card-grid .card.compact a {
        display: block;
      }
    }

    /* V20 polish: make the directory read like a clean entry board, not an old accordion list. */
    .page-photo-bg {
      display: none;
    }

    .app {
      background: #f7f8fb;
      backdrop-filter: none;
    }

    #hot .card-grid .card.compact {
      border-color: var(--line);
      background: #ffffff;
    }

    #hot .card-grid .card.compact:hover {
      border-color: #bdd5ea;
      background: #fbfdff;
    }

    #hot .card-grid .card.compact a {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 16px;
      padding: 16px 18px;
    }

    #hot .card-grid .card.compact .thumb {
      display: block;
      width: 54px;
      height: 54px;
      margin: 0;
      overflow: hidden;
      border-radius: 12px;
      background: #07111f;
      box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.18), 0 10px 24px rgba(15, 23, 42, 0.16);
    }

    #hot .card-grid .card.compact .thumb::before {
      inset: 0;
      background-image: var(--art);
      background-position: center;
      background-size: cover;
      opacity: 1;
      filter: saturate(1.26) contrast(1.08) brightness(1.14);
    }

    #hot .card-grid .card.compact .thumb::after {
      display: block;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.10), transparent 42%),
        radial-gradient(circle at 50% 50%, transparent 46%, rgba(3, 7, 18, 0.26) 100%);
    }

    #hot .card-grid .card.compact .card-body {
      padding: 0;
    }

    #hot .card-grid .card.compact .card-body h3 {
      margin: 0 0 8px;
      color: #111827;
      font-size: 18px;
    }

    #hot .card-grid .card.compact .card-body h3::before {
      display: none;
    }

    #hot .card-grid .card.compact .card-body p {
      margin: 0;
      color: var(--muted) !important;
    }

    #hot .card-grid .card.compact .meta {
      display: flex;
    }

    #directory .category-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    #directory .category-panel {
      min-height: 118px;
      border-color: rgba(112, 180, 230, 0.28);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(224, 240, 252, 0.46)),
        rgba(255, 255, 255, 0.46);
      backdrop-filter: blur(18px) saturate(140%);
      box-shadow:
        0 14px 30px rgba(25, 66, 106, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    #directory .category-panel:hover {
      border-color: #9cc7e7;
      background: #f7fbff;
      transform: translateY(-1px);
    }

    #directory .category-summary {
      min-height: 118px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      align-content: center;
      gap: 8px 12px;
      padding: 18px 20px;
    }

    #directory .category-icon {
      display: none;
    }

    #directory .category-title b {
      overflow: hidden;
      color: #111827;
      font-size: 20px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #directory .category-title span {
      display: -webkit-box;
      min-height: 34px;
      margin-top: 4px;
      overflow: hidden;
      color: #657386;
      font-size: 12px;
      line-height: 1.42;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    #directory .category-count {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      width: fit-content;
      padding: 6px 11px;
      border: 1px solid #e3e9f1;
      border-radius: 999px;
      background: rgba(248, 250, 252, 0.78);
      color: #657386;
      font-size: 13px;
      line-height: 1.2;
    }

    #directory .category-summary::after {
      display: none;
    }

    #directory .category-list.is-detail {
      display: none;
    }

    #directory .category-detail {
      border: 1px solid #dbe6f1;
      border-radius: 8px;
      background: #ffffff;
    }

    #directory .category-detail .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #directory .category-detail .card-grid .card.compact {
      border-color: #e3e9f1;
      background: #fbfdff;
    }

    #directory .category-detail .card-grid .card.compact:hover {
      border-color: #bdd5ea;
      background: #ffffff;
    }

    #directory .category-detail .card-grid .card.compact a {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
    }

    #directory .category-detail .card-grid .card.compact .thumb {
      display: block;
      width: 48px;
      min-height: 48px;
      margin: 0;
      border: 1px solid rgba(121, 153, 184, 0.28);
      border-radius: 13px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.76), rgba(238, 246, 255, 0.42) 48%, rgba(190, 219, 245, 0.30)),
        radial-gradient(circle at 28% 20%, rgba(255,255,255,0.90), transparent 32%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(88, 123, 156, 0.12),
        0 10px 24px rgba(39, 70, 102, 0.12);
      backdrop-filter: blur(18px) saturate(1.28);
      -webkit-backdrop-filter: blur(18px) saturate(1.28);
      overflow: hidden;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    #directory .category-detail .card-grid .card.compact .thumb.dark {
      background:
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(239, 246, 255, 0.40) 48%, rgba(192, 213, 238, 0.28)),
        radial-gradient(circle at 28% 20%, rgba(255,255,255,0.86), transparent 32%);
    }

    #directory .category-detail .card-grid .card.compact .thumb::before {
      inset: 10px;
      z-index: 1;
      border-radius: 9px;
      background-image: var(--art);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      filter: saturate(1.12) contrast(1.04) drop-shadow(0 6px 10px rgba(30, 64, 104, 0.18));
      opacity: 0.96;
    }

    #directory .category-detail .card-grid .card.compact .thumb::after {
      display: block;
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.72) 0 18%, transparent 19% 56%, rgba(90, 163, 219, 0.12) 57% 100%),
        radial-gradient(circle at 72% 78%, rgba(71, 168, 226, 0.16), transparent 36%);
      mix-blend-mode: normal;
      pointer-events: none;
    }

    #directory .category-detail .card-grid .card.compact:hover .thumb {
      border-color: rgba(70, 143, 199, 0.42);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(69, 120, 168, 0.16),
        0 14px 30px rgba(42, 102, 151, 0.18);
      transform: translateY(-1px);
    }

    #directory .category-summary .category-icon {
      border: 1px solid rgba(101, 139, 176, 0.30);
      background:
        linear-gradient(145deg, rgba(255,255,255,0.78), rgba(235, 246, 255, 0.46) 52%, rgba(188, 222, 247, 0.28)),
        radial-gradient(circle at 30% 18%, rgba(255,255,255,0.90), transparent 34%);
      color: #245f92;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 10px 22px rgba(40, 83, 122, 0.12);
      backdrop-filter: blur(16px) saturate(1.22);
      -webkit-backdrop-filter: blur(16px) saturate(1.22);
    }

    #directory .category-detail .card-grid .card.compact .tag {
      display: none;
    }

    #directory .category-detail .card-grid .card.compact .card-body {
      padding: 0;
    }

    #directory .category-detail .card-grid .card.compact .card-body h3 {
      margin: 0 0 5px;
      color: #111827;
      font-size: 15px;
    }

    #directory .category-detail .card-grid .card.compact .card-body h3::before {
      display: none;
    }

    #directory .category-detail .card-grid .card.compact .card-body p {
      margin: 0;
      color: #657386 !important;
      font-size: 13px;
      line-height: 1.45;
    }

      #directory .category-detail .card-grid .card.compact .meta {
        display: flex;
        margin-top: 8px;
      }

    .cold-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .cold-channel {
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #ffffff;
      overflow: hidden;
    }

    .cold-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfdff;
      color: inherit;
      text-decoration: none;
    }

    .cold-head h3 {
      margin: 0 0 4px;
      color: #111827;
      font-size: 18px;
    }

    .cold-head p {
      margin: 0;
      color: #657386;
      font-size: 13px;
      line-height: 1.45;
    }

    .cold-more {
      flex: 0 0 auto;
      border: 1px solid #dbe6f1;
      border-radius: 7px;
      padding: 7px 9px;
      color: #273244;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
    }

    .cold-list {
      display: grid;
      padding: 4px 0;
    }

    .cold-list a {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 16px;
      border-bottom: 1px solid #edf2f7;
      color: #273244;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.42;
    }

    .cold-list a:last-child {
      border-bottom: 0;
    }

    .cold-list a:hover {
      background: #f1f8ff;
      color: #155b8f;
    }

    .cold-list em {
      flex: 0 0 auto;
      border: 1px solid rgba(75,155,216,.28);
      border-radius: 999px;
      background: #edf7ff;
      color: #2673ad;
      font-style: normal;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      padding: 6px 8px;
      white-space: nowrap;
    }

    .cold-updated {
      margin-top: 10px;
      color: #657386;
      font-size: 12px;
    }

    @media (max-width: 760px) {
      .page-photo-bg {
        display: none;
      }

      .app {
        background: #f7f8fb;
        backdrop-filter: none;
      }

      .hero-bg-slide::after {
        background:
          linear-gradient(90deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.18) 56%, rgba(255,255,255,0.06) 100%),
          linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.16));
      }

      #hot .card-grid .card.compact a {
        grid-template-columns: 62px minmax(0, 1fr);
      }

      #directory .category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      #directory .category-panel,
      #directory .category-summary {
        min-height: 108px;
      }

      #directory .category-summary {
        grid-template-columns: 32px minmax(0, 1fr) 22px;
        gap: 7px 8px;
        padding: 12px;
      }

      #directory .category-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
      }

      #directory .category-title b {
        overflow: visible;
        font-size: 15px;
        line-height: 1.28;
        text-overflow: clip;
        white-space: normal;
      }

      #directory .category-title span {
        min-height: 32px;
        font-size: 11px;
      }

      #directory .category-summary::after {
        width: 22px;
        height: 22px;
        font-size: 18px;
      }

      #directory .category-detail .card-grid {
        display: grid;
        grid-template-columns: 1fr;
      }

      .cold-board {
        grid-template-columns: 1fr;
      }

      .cold-head {
        display: block;
      }

      .cold-more {
        display: inline-flex;
        margin-top: 10px;
      }

      .cold-list a {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        padding: 11px 14px;
      }
    }

    /* V38: keep tabs on the lower-left edge and the quote on the lower-right edge. */
    .hero {
      position: relative;
    }

    .hero-tabs {
      position: absolute;
      left: 28px;
      right: auto;
      bottom: 24px;
      z-index: 4;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
      max-width: none;
      flex-wrap: nowrap !important;
    }

    .hero::before {
      position: absolute;
      left: 28px;
      bottom: 92px;
      z-index: 4;
      margin: 0;
    }

    .hero-tabs button,
    .hero-tabs button:hover,
    .hero-tabs button.active {
      min-width: 92px;
      min-height: 56px;
      padding: 0 24px;
      border: 1px solid rgba(177, 198, 217, 0.78);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.74);
      color: #243244;
      box-shadow: 0 10px 24px rgba(36, 47, 63, 0.12);
      font-size: 20px;
      font-weight: 800;
      opacity: 1;
      text-shadow: none;
      backdrop-filter: blur(10px) saturate(120%);
      transform: none;
    }

    .hero-tabs button.active {
      border-color: rgba(100, 177, 217, 0.82);
      color: #17719f;
      background: rgba(242, 250, 255, 0.82);
    }

    .hero-tabs button.active::after {
      display: none;
    }

    .hero-top {
      position: absolute;
      left: auto;
      right: 44px;
      top: auto;
      bottom: 46px;
      transform: none;
      z-index: 3;
      display: block;
      margin: 0;
      width: min(40%, 540px);
    }

    .hero-title {
      display: none;
    }

    .hero-quote {
      width: min(610px, 100%);
      max-width: min(610px, 100%);
      margin: 0;
      padding: 0;
      color: #5e5b3f;
      font-weight: 700;
      text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.82),
        0 10px 24px rgba(68, 42, 12, 0.16);
    }

    .hero-quote .quote-main {
      color: #5e5b3f;
    }

    .hero-quote .quote-source {
      margin-top: 10px;
      color: #6f6a55;
      opacity: 0.95;
      text-align: right;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72);
    }

    @media (min-width: 761px) and (max-width: 1100px) {
      .hero-tabs button,
      .hero-tabs button:hover,
      .hero-tabs button.active {
        min-width: 66px;
        padding: 0 12px;
        font-size: 17px;
      }

      .hero-top {
        width: min(34%, 360px);
      }
    }

    @media (max-width: 760px) {
      .hero {
        min-height: 360px;
      }

      .hero-top {
        left: auto;
        right: 16px;
        top: auto;
        bottom: 74px;
        transform: none;
        width: min(56%, 230px);
      }

      .hero::before {
        left: 14px;
        bottom: 70px;
      }

      .hero-tabs {
        left: 14px;
        right: auto;
        bottom: 16px;
        max-width: calc(38% - 18px);
        overflow: visible;
        gap: 5px;
        scrollbar-width: none;
        flex-wrap: wrap !important;
      }

      .hero-tabs::-webkit-scrollbar {
        display: none;
      }

      .hero-tabs button,
      .hero-tabs button:hover,
      .hero-tabs button.active {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 34px;
        padding: 0 5px;
        font-size: 12px;
      }

      .hero-quote {
        padding: 0;
        font-size: 11px;
        line-height: 1.46;
        text-align: right;
      }

      .hero-quote .quote-source {
        margin-top: 6px;
        font-size: 9px;
        line-height: 1.3;
        text-align: right;
        white-space: nowrap;
      }
    }

    .card,
    .status-card,
    #directory .category-panel,
    .category-panel,
    .menu a,
    .sidebar-foot,
    .hero-tabs button,
    .copy,
    .button {
      position: relative;
      overflow: hidden;
      transform-origin: center;
      transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
    }

    .card::before,
    .status-card::before,
    #directory .category-panel::before,
    .category-panel::before,
    .menu a::before,
    .sidebar-foot::before,
    .hero-tabs button::before,
    .copy::before,
    .button::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.44) 50%, transparent 62%, transparent 100%);
      transform: translateX(-120%);
      transition: transform 0.46s ease;
    }

    .card > *,
    .status-card > *,
    #directory .category-panel > *,
    .category-panel > *,
    .menu a > *,
    .sidebar-foot > *,
    .hero-tabs button > *,
    .copy > *,
    .button > * {
      position: relative;
      z-index: 1;
    }

    .card:hover,
    .status-card:hover,
    #directory .category-panel:hover,
    .category-panel:hover,
    .menu a:hover,
    .sidebar-foot:hover,
    .hero-tabs button:hover,
    .copy:hover,
    .button:hover {
      transform: translateY(-5px) scale(1.035);
      border-color: rgba(76, 166, 224, 0.86) !important;
      box-shadow:
        0 28px 54px rgba(25, 66, 106, 0.24),
        0 0 0 5px rgba(102, 185, 238, 0.14),
        0 0 42px rgba(83, 172, 231, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
      z-index: 5;
    }

    .card:hover::before,
    .status-card:hover::before,
    #directory .category-panel:hover::before,
    .category-panel:hover::before,
    .menu a:hover::before,
    .sidebar-foot:hover::before,
    .hero-tabs button:hover::before,
    .copy:hover::before,
    .button:hover::before {
      transform: translateX(120%);
    }

    .menu a:hover {
      color: #0d6fa8 !important;
    }

    .prompt-item:hover,
    .status-card .copy:hover,
    .card .copy:hover {
      transform: translateY(-2px) scale(1.015);
    }

    .card-grid > .card,
    .card-grid > article.card,
    .card-grid > .card > a,
    .card-grid > article.card > a {
      position: relative !important;
      overflow: hidden !important;
      transform-origin: center !important;
      transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease !important;
    }

    .card-grid > .card::after,
    .card-grid > article.card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.44) 50%, transparent 62%, transparent 100%);
      transform: translateX(-120%);
      transition: transform 0.46s ease;
    }

    .card-grid > .card:hover,
    .card-grid > article.card:hover {
      transform: translateY(-5px) scale(1.035) !important;
      border-color: rgba(76, 166, 224, 0.86) !important;
      box-shadow:
        0 28px 54px rgba(25, 66, 106, 0.24),
        0 0 0 5px rgba(102, 185, 238, 0.14),
        0 0 42px rgba(83, 172, 231, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
      z-index: 8 !important;
    }

    .card-grid > .card:hover::after,
    .card-grid > article.card:hover::after {
      transform: translateX(120%);
    }

    .card-grid > .card > *,
    .card-grid > article.card > * {
      position: relative;
      z-index: 1;
    }

    .cold-channel,
    .cold-list a,
    .cold-more,
    .category-content a,
    .meta a {
      position: relative !important;
      overflow: hidden !important;
      transform-origin: center !important;
      transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease !important;
    }

    .cold-channel::before,
    .cold-list a::before,
    .cold-more::before,
    .category-content a::before,
    .meta a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.46) 50%, transparent 62%, transparent 100%);
      transform: translateX(-120%);
      transition: transform 0.46s ease;
    }

    .cold-channel > *,
    .cold-list a > *,
    .cold-more > *,
    .category-content a > *,
    .meta a > * {
      position: relative;
      z-index: 1;
    }

    .cold-channel:hover,
    .cold-list a:hover,
    .cold-more:hover,
    .category-content a:hover,
    .meta a:hover {
      transform: translateY(-5px) scale(1.035) !important;
      border-color: rgba(76, 166, 224, 0.86) !important;
      box-shadow:
        0 28px 54px rgba(25, 66, 106, 0.24),
        0 0 0 5px rgba(102, 185, 238, 0.14),
        0 0 42px rgba(83, 172, 231, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
      z-index: 8 !important;
    }

    .cold-list a:hover,
    .cold-more:hover,
    .category-content a:hover,
    .meta a:hover {
      transform: translateY(-2px) scale(1.02) !important;
    }

    .cold-channel:hover::before,
    .cold-list a:hover::before,
    .cold-more:hover::before,
    .category-content a:hover::before,
    .meta a:hover::before {
      transform: translateX(120%);
    }

    a,
    button,
    summary,
    .detail-back,
    .home-crumb,
    .cold-list a,
    .cold-more {
      position: relative;
      overflow: hidden;
      transform-origin: center;
      transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
    }

    a::after,
    button::after,
    summary::after,
    .detail-back::after,
    .home-crumb::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.44) 50%, transparent 62%, transparent 100%);
      transform: translateX(-120%);
      transition: transform 0.46s ease;
    }

    a:hover,
    button:hover,
    summary:hover,
    .detail-back:hover,
    .home-crumb:hover {
      transform: translateY(-3px) scale(1.025);
      border-color: rgba(76, 166, 224, 0.86) !important;
      box-shadow:
        0 18px 36px rgba(25, 66, 106, 0.18),
        0 0 0 4px rgba(102, 185, 238, 0.12),
        0 0 34px rgba(83, 172, 231, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
      z-index: 8;
    }

    a:hover::after,
    button:hover::after,
    summary:hover::after,
    .detail-back:hover::after,
    .home-crumb:hover::after {
      transform: translateX(120%);
    }

    #directory .category-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #directory .category-summary {
      grid-template-columns: minmax(0, 1fr) auto !important;
    }

    #directory .category-icon,
    #directory .category-summary::after {
      display: none !important;
    }

    @media (max-width: 760px) {
      #directory .category-list {
        grid-template-columns: 1fr !important;
      }

      #directory .category-panel,
      #directory .category-summary {
        min-height: auto !important;
      }

      #directory .category-summary {
        padding: 16px !important;
      }
    }

    /* Local trial: mist-blue glass background with a restrained technical grid. */
    body {
      background:
        linear-gradient(118deg, transparent 0 18%, rgba(96, 213, 203, 0.12) 28%, transparent 42%),
        linear-gradient(246deg, transparent 0 16%, rgba(85, 154, 222, 0.13) 34%, transparent 52%),
        linear-gradient(135deg, rgba(115, 213, 218, 0.18) 0%, transparent 34%),
        linear-gradient(215deg, rgba(77, 148, 209, 0.15) 0%, transparent 38%),
        linear-gradient(180deg, #f4f8fb 0%, #edf5f9 44%, #f8fbfd 100%) !important;
      background-attachment: fixed;
    }

    body::before {
      display: block !important;
      width: auto !important;
      height: auto !important;
      inset: 0 !important;
      left: 0 !important;
      top: 0 !important;
      z-index: 0 !important;
      opacity: 0.52 !important;
      filter: none !important;
      animation: none !important;
      background:
        linear-gradient(rgba(68, 122, 168, 0.062) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 122, 168, 0.052) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 46%, rgba(96, 191, 196, 0.055) 47%, transparent 48% 100%),
        linear-gradient(45deg, transparent 0 72%, rgba(73, 144, 197, 0.040) 73%, transparent 75% 100%) !important;
      background-size: 42px 42px, 42px 42px, 86px 86px, 128px 128px !important;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.52) 58%, rgba(0,0,0,0.24));
    }

    body::after {
      display: block !important;
      width: auto !important;
      height: auto !important;
      inset: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 0 !important;
      opacity: 0.76 !important;
      filter: blur(0) !important;
      animation: none !important;
      background:
        linear-gradient(112deg, transparent 0 16%, rgba(76, 211, 190, 0.15) 34%, transparent 54%),
        linear-gradient(292deg, transparent 0 20%, rgba(88, 161, 223, 0.14) 44%, transparent 66%),
        linear-gradient(12deg, transparent 0 62%, rgba(255,255,255,0.52) 74%, transparent 88%),
        linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.10)) !important;
    }

    .noise {
      display: block !important;
      opacity: 0.28;
      background-image:
        radial-gradient(circle at 50% 50%, rgba(47, 95, 134, 0.06) 0 1px, transparent 1.4px),
        linear-gradient(rgba(42, 95, 137, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 95, 137, 0.022) 1px, transparent 1px);
      background-size: 24px 24px, 18px 18px, 18px 18px;
      mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.62) 62%, transparent 100%);
    }

    .aurora {
      display: none;
    }

    .app {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.26), rgba(241,247,251,0.18)) !important;
    }

    aside,
    .topbar,
    .hero,
    .card-grid .card,
    .status-card,
    .directory-board,
    .category-panel,
    .cold-channel {
      background:
        linear-gradient(145deg, rgba(255,255,255,0.86), rgba(246,252,255,0.66)),
        rgba(255, 255, 255, 0.62) !important;
      border-color: rgba(177, 210, 232, 0.78) !important;
      backdrop-filter: blur(22px) saturate(1.22);
      -webkit-backdrop-filter: blur(22px) saturate(1.22);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 18px 48px rgba(51, 94, 128, 0.10);
    }

    .content-section {
      position: relative;
    }

    .content-section::before {
      content: "";
      position: absolute;
      left: -18px;
      right: -18px;
      top: -16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(83, 172, 231, 0.24), rgba(84, 211, 190, 0.20), transparent);
      pointer-events: none;
    }

    .section-head {
      padding-top: 4px;
    }

    .feature-card {
      isolation: isolate;
    }

    .feature-card > a {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 252, 255, 0.64)),
        rgba(255, 255, 255, 0.58);
      backdrop-filter: blur(18px) saturate(128%);
      -webkit-backdrop-filter: blur(18px) saturate(128%);
    }

    .feature-card .thumb,
    .feature-card .card-body {
      transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
    }

    #hot .feature-card.compact a {
      grid-template-columns: 86px minmax(0, 1fr);
      align-items: center;
      min-height: 142px;
    }

    #hot .feature-card .thumb {
      width: 76px;
      height: 76px;
      box-shadow: 0 18px 38px rgba(41, 112, 155, 0.16);
    }

    #hot .feature-card .thumb .tag {
      display: none;
    }

    #hot .feature-card .card-body {
      min-height: 76px;
      display: flex;
      align-items: center;
    }

    #hot .feature-card .card-body p,
    #hot .feature-card .card-body .meta {
      display: none !important;
    }

    #hot .feature-card .card-body h3 {
      margin: 0;
      font-size: 25px;
      line-height: 1.25;
    }

    .feature-hover {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 24px 22px;
      color: #ffffff;
      background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(42, 48, 50, 0.54), rgba(92, 94, 91, 0.46)),
        rgba(70, 74, 72, 0.38);
      border: 1px solid rgba(83, 230, 162, 0.88);
      border-radius: inherit;
      opacity: 0;
      transform: translateY(10px) scale(0.985);
      pointer-events: none;
      backdrop-filter: blur(34px) saturate(132%) brightness(0.98);
      -webkit-backdrop-filter: blur(34px) saturate(132%) brightness(0.98);
      box-shadow:
        0 24px 54px rgba(26, 95, 86, 0.26),
        0 0 0 1px rgba(112, 238, 183, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(255,255,255,0.10);
      transition: opacity 0.26s ease, transform 0.26s cubic-bezier(.2,.9,.2,1);
    }

    .feature-hover-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .feature-hover-title .hover-icon {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 8px;
      background-image: var(--hover-icon);
      background-size: cover;
      background-position: center;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    }

    #hot .feature-card .thumb {
      background-color: #07111f !important;
      background-image: var(--art) !important;
      background-size: contain !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }

    #hot .feature-card .thumb img,
    #hot .feature-card .feature-hover-title .hover-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: inherit;
    }

    #hot .feature-card .thumb::before,
    #hot .feature-card .thumb::after {
      display: none !important;
    }

    #hot .feature-card .feature-hover-title .hover-icon {
      background-color: #07111f !important;
      background-image: var(--hover-icon) !important;
      background-size: contain !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }

    .feature-hover b {
      font-size: 22px;
      line-height: 1.25;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    }

    .feature-hover p {
      margin: 12px 0;
      color: rgba(255, 255, 255, 0.86);
      font-size: 15px;
      line-height: 1.66;
      font-weight: 650;
    }

    .feature-hover span {
      color: rgba(255, 255, 255, 0.56);
      font-weight: 700;
    }

    .feature-hover::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.16) 42%, transparent 68%);
      opacity: 0;
      transform: translateX(-38%);
      transition: opacity 0.26s ease, transform 0.68s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px) scale(1.035) !important;
    }

    .feature-card:hover .thumb,
    .feature-card:hover .card-body {
      opacity: 0.42;
      filter: blur(14px) brightness(0.82) saturate(0.82);
      transform: scale(1.05);
    }

    .feature-card:hover .feature-hover {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .feature-card:hover .feature-hover::after {
      opacity: 1;
      transform: translateX(38%);
    }

    @media (max-width: 760px) {
      .feature-hover {
        display: none;
      }

      .feature-card:hover .thumb,
      .feature-card:hover .card-body {
        opacity: 1;
        filter: none;
        transform: none;
      }
    }

    /* Chunyu home ops gauges */
    .chunyu-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
    .gauge-card{position:relative;min-height:168px;border:1px solid rgba(138,255,225,.18);border-radius:22px;background:linear-gradient(145deg,rgba(24,18,45,.78),rgba(15,28,45,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.22);padding:16px;overflow:hidden}
    .gauge-card:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 20%,rgba(86,236,255,.16),transparent 35%);pointer-events:none}
    .gauge-title{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;color:#eaffff;font-weight:800;letter-spacing:.04em}
    .gauge-title small{color:var(--muted);font-weight:700}
    .dial{position:relative;z-index:1;width:104px;height:104px;margin:16px auto 4px;border-radius:50%;background:radial-gradient(circle,#17152b 0 48%,transparent 49%),conic-gradient(from -135deg,rgba(68,255,211,.95) 0 0deg,rgba(255,255,255,.12) 0 270deg,transparent 270deg);border:1px solid rgba(255,255,255,.14);box-shadow:0 0 30px rgba(68,255,211,.12)}
    .dial:before{content:"";position:absolute;left:50%;top:50%;width:3px;height:42px;border-radius:999px;background:linear-gradient(#fff,#54ffdf);transform-origin:50% 92%;transform:translate(-50%,-92%) rotate(var(--needle,-135deg));box-shadow:0 0 12px rgba(84,255,223,.8)}
    .dial:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:#eaffff;transform:translate(-50%,-50%);box-shadow:0 0 16px rgba(84,255,223,.8)}
    .gauge-note{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:12px}
    @media(max-width:760px){.chunyu-gauges{grid-template-columns:1fr}.gauge-card{min-height:148px}.dial{width:92px;height:92px}}

    /* V40: quote placement per Billy screenshots; tabs stay left/bottom, quote source sits in the marked lower-right band. */
    .hero-bg-slide img {
      opacity: 0.90 !important;
      filter: saturate(1.16) contrast(1.08) brightness(1.08) !important;
    }

    .hero-top {
      left: auto !important;
      right: clamp(42px, 7.2vw, 112px) !important;
      top: auto !important;
      bottom: clamp(56px, 8.2vw, 92px) !important;
      width: min(46%, 620px) !important;
      transform: none !important;
    }

    .hero-quote {
      color: rgba(101, 82, 46, 0.86) !important;
      text-shadow:
        0 1px 2px rgba(255, 246, 216, 0.72),
        0 8px 20px rgba(74, 48, 13, 0.16) !important;
    }

    .hero-quote .quote-main {
      color: rgba(132, 101, 36, 0.82) !important;
    }

    .hero-quote .quote-source {
      color: rgba(78, 71, 54, 0.78) !important;
      margin-top: clamp(10px, 1.4vw, 16px) !important;
      text-align: center !important;
      transform: translateX(4%) !important;
    }

    @media (max-width: 760px) {
      .hero-bg-slide img {
        opacity: 0.90 !important;
        filter: saturate(1.16) contrast(1.06) brightness(1.07) !important;
      }

      .hero-top {
        left: auto !important;
        right: 14px !important;
        bottom: 96px !important;
        width: min(64%, 270px) !important;
      }

      .hero-quote {
        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: rgba(150, 116, 31, 0.90) !important;
        text-shadow:
          0 1px 2px rgba(255, 244, 202, 0.75),
          0 0 10px rgba(82, 55, 10, 0.13) !important;
      }

      .hero-quote .quote-main {
        color: rgba(176, 132, 28, 0.92) !important;
      }

      .hero-quote .quote-source {
        display: block !important;
        margin-top: 18px !important;
        color: rgba(58, 55, 44, 0.76) !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: translateX(8%) !important;
      }
    }

    body.auto-night {
      --bg: #0d111c;
      --bg-2: #121827;
      --panel: rgba(18, 25, 39, 0.64);
      --panel-strong: rgba(14, 20, 32, 0.88);
      --panel-soft: rgba(255, 255, 255, 0.055);
      --line: rgba(210, 225, 255, 0.12);
      --line-strong: rgba(226, 238, 255, 0.2);
      --text: #f2f6ff;
      --muted: #aab6ca;
      --soft: #d2dcee;
      --accent: #74d2ff;
      --accent-2: #7ff0c4;
      --accent-3: #ffd37d;
    }
    body.owner-mode .owner-only { display: inline-flex; }
    .owner-only { display: none; }
    .mode-badge,
    .quick-nav-toggle {
      position: fixed;
      z-index: 80;
      border: 1px solid var(--line-strong);
      background: rgba(18, 24, 39, 0.62);
      color: var(--text);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    }
    .mode-badge {
      right: 18px;
      bottom: 18px;
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .mode-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #9ca8ba;
      box-shadow: 0 0 16px rgba(156, 168, 186, 0.72);
    }
    body.owner-mode .mode-badge::before {
      background: #63f0a7;
      box-shadow: 0 0 18px rgba(99, 240, 167, 0.82);
    }
    body.owner-mode .mode-badge .mode-text::after { content: "管理模式"; }
    body:not(.owner-mode) .mode-badge .mode-text::after { content: "浏览模式"; }
    .quick-nav-toggle {
      right: 18px;
      top: 18px;
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      font-size: 22px;
      cursor: pointer;
    }
    .nav-drawer {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      background: rgba(6, 10, 18, 0.56);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .nav-drawer.open { display: block; }
    .nav-sheet {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(720px, calc(100% - 28px));
      max-height: min(720px, calc(100vh - 36px));
      transform: translate(-50%, -50%);
      border: 1px solid var(--line-strong);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), rgba(17, 23, 37, 0.9);
      box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
      overflow: hidden;
    }
    .nav-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--line);
    }
    .nav-sheet-head h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: 0;
    }
    .nav-sheet-close {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      width: 38px;
      height: 38px;
      cursor: pointer;
    }
    .nav-sheet-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
      overflow: auto;
      max-height: calc(min(720px, 100vh - 36px) - 74px);
    }
    .nav-sheet-link {
      display: grid;
      gap: 6px;
      min-height: 88px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--text);
      text-decoration: none;
      background: rgba(255, 255, 255, 0.055);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .nav-sheet-link:hover {
      transform: translateY(-3px);
      border-color: rgba(116, 210, 255, 0.62);
      background: rgba(116, 210, 255, 0.1);
    }
    .nav-sheet-link b { font-size: 17px; }
    .nav-sheet-link span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .reader-actions {
      display: none;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    body.owner-mode .reader-actions { display: flex; }
    .reader-actions button {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--soft);
      padding: 8px 12px;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
    }
    body.owner-mode .card[data-read-state="unread"] {
      background: linear-gradient(145deg, rgba(255, 131, 151, 0.18), rgba(255, 255, 255, 0.045)), var(--panel);
      border-color: rgba(255, 150, 166, 0.34);
    }
    body.owner-mode .card[data-read-state="read"] {
      background: linear-gradient(145deg, rgba(103, 235, 165, 0.18), rgba(255, 255, 255, 0.045)), var(--panel);
      border-color: rgba(118, 232, 174, 0.34);
    }
    .search-results {
      display: none;
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(15, 21, 34, 0.72);
      overflow: hidden;
    }
    .search-wrap > button {
      top: 10px;
      transform: none;
    }
    .search-results.open { display: block; }
    .search-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      color: var(--text);
      text-decoration: none;
      border-top: 1px solid var(--line);
    }
    .search-result:first-child { border-top: 0; }
    .search-result span {
      color: var(--muted);
      font-size: 12px;
    }
    .topbar.compact {
      padding-block: 8px;
      background: rgba(13, 18, 30, 0.78);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .topbar.compact .topmeta {
      transform: scale(0.86);
      transform-origin: right center;
    }
    body.is-swiping .main { transition: transform 0.08s linear; }
    @media (max-width: 860px) {
      .quick-nav-toggle { display: inline-flex; }
      aside { display: none; }
      .app { grid-template-columns: 1fr; }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 50;
      }
      .topmeta,
      .search-wrap { display: none; }
      .crumb small { display: none; }
      .hero { min-height: 46vh; }
      .hero-tabs { display: none; }
      .mode-badge {
        left: 14px;
        right: auto;
        bottom: 14px;
      }
      .nav-sheet-grid { grid-template-columns: 1fr; }
    }

    .sidebar-music-console {
      position: relative;
      min-height: 318px;
      margin: 12px 0 0;
      overflow: hidden;
      border: 1px solid rgba(125, 179, 214, 0.46);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18));
      box-shadow: 0 16px 36px rgba(36, 88, 120, 0.16);
      color: #fff;
      isolation: isolate;
    }
    .sidebar-music-console::before {
      content: "";
      position: absolute;
      inset: -14px;
      z-index: -1;
      background-image: var(--music-cover, url('/assets/music-bg/music-bg-01.jpg'));
      background-size: cover;
      background-position: center;
      filter: blur(14px) saturate(1.08) brightness(0.94);
      opacity: 0.36;
      transition: background-image 0.45s ease, opacity 0.22s ease, filter 0.22s ease;
      transform: scale(1.04);
    }
    .sidebar-music-console::after {
      content: "";
      position: absolute;
      inset: 8px;
      z-index: -1;
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(2, 5, 10, 0.00), rgba(2, 5, 10, 0.00)),
        var(--music-cover, url('/assets/music-bg/music-bg-01.jpg')) center / contain no-repeat;
      opacity: 1;
      transition: background-image 0.45s ease, background 0.22s ease;
    }
    .sidebar-music-console:hover::before,
    .sidebar-music-console:focus-within::before {
      opacity: 0.70;
      filter: blur(14px) saturate(1.08) brightness(0.78);
    }
    .sidebar-music-console:hover::after,
    .sidebar-music-console:focus-within::after {
      background:
        linear-gradient(180deg, rgba(2, 5, 10, 0.12), rgba(2, 5, 10, 0.58)),
        var(--music-cover, url('/assets/music-bg/music-bg-01.jpg')) center / contain no-repeat;
    }
    .sidebar-music-title {
      position: absolute;
      z-index: 2;
      left: 14px;
      top: 12px;
      right: 12px;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0;
      text-shadow: 0 2px 14px rgba(0,0,0,0.42);
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .sidebar-music-track {
      position: absolute;
      z-index: 2;
      right: 14px;
      top: 82px;
      max-width: 124px;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.35;
      color: rgba(255,255,255,0.88);
      text-align: right;
      text-shadow: 0 2px 12px rgba(0,0,0,0.46);
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .sidebar-music-console:hover .sidebar-music-title,
    .sidebar-music-console:focus-within .sidebar-music-title,
    .sidebar-music-console:hover .sidebar-music-track,
    .sidebar-music-console:focus-within .sidebar-music-track {
      opacity: 1;
      transform: translateY(0);
    }
    .sidebar-music-controls {
      position: absolute;
      z-index: 3;
      left: 12px;
      right: 12px;
      bottom: 46px;
      display: grid;
      grid-template-columns: 58px 1fr 34px;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .sidebar-music-console:hover .sidebar-music-controls,
    .sidebar-music-console:focus-within .sidebar-music-controls,
    .sidebar-music-console:hover .sidebar-music-sleep,
    .sidebar-music-console:focus-within .sidebar-music-sleep {
      opacity: 1;
      transform: translateY(0);
    }
    .sidebar-music-sleep {
      position: absolute;
      z-index: 3;
      left: 12px;
      right: 12px;
      bottom: 12px;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .music-sleep {
      min-width: 0;
      height: 28px;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 999px;
      background: rgba(18, 22, 30, 0.54);
      color: rgba(255,255,255,0.84);
      font: inherit;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .music-sleep.active,
    .music-sleep:hover {
      border-color: rgba(105, 223, 242, 0.64);
      background: rgba(105, 223, 242, 0.34);
      color: #fff;
      box-shadow: 0 8px 18px rgba(43, 179, 202, 0.14);
    }
    .music-sleep-off.active {
      background: rgba(255,255,255,0.16);
      border-color: rgba(255,255,255,0.34);
    }
    .music-play,
    .music-volume {
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.34);
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      color: #fff;
      cursor: pointer;
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    .music-play {
      width: 58px;
      height: 58px;
      font-size: 24px;
    }
    .music-volume {
      width: 34px;
      height: 34px;
      font-size: 15px;
    }
    .music-volume-slider {
      width: 100%;
      height: 10px;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 999px;
      background:
        linear-gradient(90deg, #69dff2 0 var(--volume, 68%), rgba(255,255,255,0.24) var(--volume, 68%) 100%);
      cursor: pointer;
    }
    .music-volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,0.88);
      border-radius: 50%;
      background: #69dff2;
      box-shadow: 0 4px 12px rgba(0,0,0,0.28);
    }
    .music-volume-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,0.88);
      border-radius: 50%;
      background: #69dff2;
      box-shadow: 0 4px 12px rgba(0,0,0,0.28);
    }
    .sidebar-music-list {
      position: absolute;
      z-index: 3;
      left: 12px;
      right: 12px;
      bottom: 120px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      max-height: none;
      overflow: visible;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .sidebar-music-console:hover .sidebar-music-list,
    .sidebar-music-console:focus-within .sidebar-music-list {
      opacity: 1;
      transform: translateY(0);
    }
    .sidebar-music-console:hover .sidebar-music-list {
      padding-right: 4px;
    }
    .sidebar-music-list button {
      min-width: 0;
      border: 1px solid rgba(255,255,255,0.22);
      min-height: 32px;
      border-radius: 8px;
      background: rgba(18, 22, 30, 0.58);
      color: rgba(255,255,255,0.86);
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.22;
      padding: 6px 8px;
      text-align: left;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .sidebar-music-list button.active,
    .sidebar-music-list button:hover {
      border-color: rgba(105, 223, 242, 0.56);
      background: rgba(105, 223, 242, 0.34);
      color: #fff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 10px 24px rgba(43, 179, 202, 0.16);
    }
    .sidebar-music-list button.active {
      background:
        linear-gradient(135deg, rgba(105, 223, 242, 0.40), rgba(255,255,255,0.16)),
        rgba(54, 105, 115, 0.62);
    }

    #directory .section-head span {
      font-size: 0;
    }
    #directory .section-head span::after {
      content: "保留四个大类，点开后再看具体入口";
      font-size: 14px;
    }
    #directory .category-panel:nth-of-type(2),
    #directory .category-panel:nth-of-type(4),
    #directory .category-panel:nth-of-type(6),
    #directory .category-panel:nth-of-type(7),
    #directory .category-panel:nth-of-type(9),
    #directory .category-panel:nth-of-type(10) {
      display: none;
    }
    #directory .category-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    #directory .category-summary {
      min-height: 86px;
      padding: 18px;
      gap: 12px;
    }
    #directory .category-title b {
      font-size: 20px;
    }
    #directory .category-title span {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.45;
    }
    @media (max-width: 860px) {
      #directory .category-list {
        grid-template-columns: 1fr;
      }
      #directory .category-summary {
        min-height: 78px;
      }
    }

    #chunyu-home .section-head span {
      font-size: 0;
    }
    #chunyu-home .section-head span::after {
      content: "运行状态和项目入口集中看";
      font-size: 14px;
    }
    .run-board {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      gap: 16px;
    }
    .run-panel {
      height: 100%;
      border: 1px solid rgba(177, 210, 232, 0.82);
      border-radius: 8px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(244,250,253,0.72)),
        rgba(255,255,255,0.74);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 18px 42px rgba(51, 94, 128, 0.10);
      padding: 18px;
      min-height: 260px;
    }
    .run-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      color: #192334;
    }
    .run-panel-head b {
      font-size: 17px;
    }
    .run-ok {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #2a9f72;
      font-size: 12px;
      font-weight: 800;
    }
    .run-ok::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #32c686;
      box-shadow: 0 0 12px rgba(50, 198, 134, 0.52);
    }
    .health-score {
      display: grid;
      gap: 6px;
      margin: 18px 0 24px;
      color: #0f1828;
    }
    .health-score strong {
      font-size: clamp(48px, 5.6vw, 72px);
      line-height: 0.95;
      letter-spacing: -0.02em;
    }
    .health-score span {
      color: #64758b;
      font-size: 15px;
      font-weight: 800;
    }
    .run-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 0 0 20px;
    }
    .run-meta div {
      border: 0;
      border-radius: 10px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 12px 28px rgba(54, 104, 137, 0.08);
      padding: 14px 16px;
    }
    .run-meta span,
    .metric-note,
    .project-sub {
      display: block;
      color: #6f7f92;
      font-size: 12px;
      line-height: 1.45;
    }
    .run-meta b {
      display: block;
      margin-top: 6px;
      color: #182235;
      font-size: 18px;
    }
    .metric-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 8px;
    }
    .metric-row {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 9px;
      border: 0;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 16px 34px rgba(54, 104, 137, 0.11);
      padding: 16px 12px 14px;
      color: #172236;
    }
    .metric-row b {
      font-size: 15px;
      line-height: 1.2;
    }
    .metric-row strong {
      position: static;
      font-size: 15px;
      line-height: 1.2;
      color: #2c87d8;
      transform: none;
    }
    .metric-title {
      display: grid;
      justify-content: center;
      gap: 4px;
      text-align: center;
    }
    .metric-bar {
      position: relative;
      width: 82px;
      height: 82px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(255,255,255,0.96) 0 57%, transparent 58%),
        conic-gradient(from -135deg, var(--gauge-color, #2fc9aa) 0 var(--value), rgba(216, 227, 234, 0.92) var(--value) 270deg, transparent 270deg);
      box-shadow:
        inset 0 0 0 1px rgba(198, 218, 231, 0.82),
        0 10px 24px rgba(47, 118, 150, 0.08);
      order: 2;
    }
    .metric-bar i {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 4px;
      height: 28px;
      border-radius: 999px;
      background: var(--gauge-color, #2fc9aa);
      transform-origin: 50% 100%;
      transform: translate(-50%, -100%) rotate(var(--needle));
      box-shadow: 0 0 8px rgba(47, 201, 170, 0.22);
    }
    .metric-bar::before {
      content: "";
      position: absolute;
      inset: 15px;
      border-radius: 50%;
      background:
        linear-gradient(180deg, #ffffff, #eef8ff);
      box-shadow:
        inset 0 0 0 1px rgba(178, 207, 226, 0.74),
        0 5px 14px rgba(66, 136, 168, 0.10);
    }
    .metric-bar::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 4;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(47, 201, 170, 0.18);
      transform: translate(-50%, -50%);
    }
    .metric-note {
      order: 3;
      text-align: center;
      min-height: 18px;
    }
    .project-list {
      display: grid;
      gap: 10px;
    }
    .project-card {
      display: grid;
      gap: 8px;
      border: 1px solid rgba(197, 219, 234, 0.92);
      border-radius: 7px;
      background: rgba(255,255,255,0.72);
      padding: 12px;
    }
    .project-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #162236;
    }
    .project-top b {
      font-size: 15px;
    }
    .project-status {
      color: #30a977;
      font-size: 12px;
      font-weight: 800;
    }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .project-stat {
      border: 1px solid rgba(207, 225, 237, 0.92);
      border-radius: 6px;
      background: rgba(250,253,255,0.78);
      padding: 8px;
    }
    .project-stat span {
      color: #77869a;
      font-size: 11px;
    }
    .project-stat b {
      display: block;
      color: #182235;
      font-size: 13px;
      margin-top: 3px;
    }
    @media (max-width: 980px) {
      .run-board {
        grid-template-columns: 1fr;
      }
      .metric-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .metric-row {
        grid-template-columns: 1fr;
      }
      .metric-note {
        grid-column: auto;
      }
    }
    @media (max-width: 620px) {
      .run-board {
        gap: 10px;
      }
      .run-panel {
        min-height: auto;
        padding: 14px;
        border-radius: 8px;
      }
      .health-score strong {
        font-size: 42px;
      }
      .run-meta,
      .project-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }
      .metric-list {
        gap: 7px;
      }
      .metric-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .metric-row b,
      .project-top b {
        font-size: 14px;
      }
      .metric-row strong {
        font-size: 15px;
      }
      .project-card {
        padding: 10px;
        gap: 6px;
      }
      .project-stat {
        padding: 7px;
      }
    }

    /* Reference layout: centered desktop preview with compact content panels. */
    @media (min-width: 861px) {
      .app {
        display: grid !important;
        grid-template-columns: 276px minmax(0, 1fr) !important;
      }
      aside {
        display: block !important;
      }
      .main {
        width: min(900px, calc(100% - 56px)) !important;
        margin: 0 auto !important;
        padding: 0 0 56px !important;
      }
      .topbar {
        min-height: 42px !important;
        margin: 0 0 14px !important;
        padding: 8px 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }
      .crumb {
        gap: 8px !important;
      }
      .crumb-badge {
        width: 28px !important;
        height: 28px !important;
      }
      .topmeta {
        gap: 8px !important;
      }
      .topmeta .pill {
        min-height: 30px !important;
        padding: 6px 11px !important;
        font-size: 12px !important;
      }
      .search-wrap {
        max-width: 100% !important;
        margin: 0 0 14px !important;
      }
      .search-wrap input {
        height: 40px !important;
        padding: 10px 50px 10px 18px !important;
        font-size: 14px !important;
      }
      .search-wrap > button {
        top: 5px !important;
        right: 6px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
      }
      .hero {
        min-height: 300px !important;
        height: 300px !important;
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 0 20px !important;
        border-radius: 6px !important;
        background:
          linear-gradient(90deg, rgba(235,249,252,0.58), rgba(255,255,255,0.68)) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
      }
      .hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background-image:
          linear-gradient(90deg, rgba(242,252,255,0.05) 0%, rgba(216,238,245,0.22) 52%, rgba(187,214,224,0.48) 100%),
          var(--hero-active-img) !important;
        background-size: cover !important;
        background-position: center !important;
        filter: blur(18px) saturate(1.05) brightness(1.08) !important;
        opacity: 0.42 !important;
        transform: scale(1.08) !important;
      }
      .hero-bg-slides {
        inset: 0 33.333% 0 0 !important;
        border-radius: inherit !important;
        z-index: 1 !important;
      }
      .hero-bg-slides::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 4 !important;
        pointer-events: none !important;
        background:
          linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(230,247,251,0.04) 68%, rgba(198,225,234,0.28) 100%) !important;
        backdrop-filter: blur(0px) !important;
      }
      .hero-bg-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        opacity: 0 !important;
        transform: translateX(0) scale(1) !important;
        transition:
          opacity 1.2s ease,
          transform 1.2s cubic-bezier(.22,.78,.2,1),
          filter 1.2s ease !important;
      }
      .hero-bg-slide::before {
        content: none !important;
      }
      .hero-bg-slides::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background:
          radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42), transparent 54%),
          linear-gradient(135deg, rgba(229,247,252,0.74), rgba(255,255,255,0.34)) !important;
        pointer-events: none !important;
      }
      .hero-bg-slide::after {
        background: none !important;
      }
      .hero-bg-slide.active {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        z-index: 3 !important;
        filter: none !important;
      }
      .hero-bg-slide.prev {
        opacity: 0.46 !important;
        transform: translateX(-62%) scale(1) !important;
        z-index: 2 !important;
        filter: blur(5px) saturate(0.82) brightness(1.04) !important;
      }
      .hero-bg-slide.next {
        opacity: 0.46 !important;
        transform: translateX(62%) scale(1) !important;
        z-index: 2 !important;
        filter: blur(5px) saturate(0.82) brightness(1.04) !important;
      }
      .hero-bg-slide img {
        position: relative !important;
        z-index: 1 !important;
        width: auto !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        opacity: 0.96 !important;
        filter: saturate(1.02) brightness(1.03) !important;
        mask-image: none !important;
        border-radius: 0 !important;
        box-shadow: 0 18px 42px rgba(42, 96, 126, 0.18) !important;
      }
      .hero-bg-slide.prev img,
      .hero-bg-slide.next img {
        box-shadow: none !important;
      }
      .hero-bg-slide.active img {
        animation: heroPhotoSettle 8s ease-out forwards !important;
      }
      @keyframes heroPhotoSettle {
        0% { transform: scale(1.015); }
        100% { transform: scale(1); }
      }
      .hero-bg-slide::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background-image: var(--hero-img) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        filter: blur(16px) saturate(1.05) brightness(1.12) !important;
        opacity: 0.18 !important;
      }
      .hero::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 0 0 64% !important;
        z-index: 1 !important;
        background:
          linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(178,209,221,0.20) 24%, rgba(125,160,174,0.32) 100%),
          radial-gradient(circle at 82% 18%, rgba(83,172,231,0.16), transparent 34%) !important;
        backdrop-filter: blur(18px) saturate(155%) brightness(0.96) !important;
        -webkit-backdrop-filter: blur(18px) saturate(155%) brightness(0.96) !important;
        mask-image: linear-gradient(90deg, transparent 0%, black 34%, black 100%) !important;
        pointer-events: none !important;
      }
      .hero-top {
        grid-column: 2 !important;
        position: relative !important;
        z-index: 3 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 24px 22px !important;
      }
      .hero-quote {
        max-width: 240px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        color: #5e4a1a !important;
        text-shadow: 0 1px 14px rgba(255,255,255,0.28) !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
      }
      .hero-quote::before,
      .hero-quote::after {
        display: none !important;
      }
      .hero-quote .quote-source {
        color: rgba(57,74,96,0.68) !important;
        font-size: 11px !important;
        margin-top: 10px !important;
      }
      .content-section {
        margin-top: 18px !important;
      }
      .section-head {
        margin-bottom: 10px !important;
      }
      .section-head h2 {
        font-size: 20px !important;
      }
      .section-head span,
      #directory .section-head span::after,
      #chunyu-home .section-head span::after {
        font-size: 12px !important;
      }
      #hot .card-grid,
      #directory .category-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }
      #hot .feature-card.compact a {
        min-height: 76px !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 14px !important;
      }
      #hot .feature-card .thumb {
        width: 38px !important;
        height: 38px !important;
        border-radius: 6px !important;
      }
      #hot .feature-card .card-body {
        min-height: 0 !important;
      }
      #hot .feature-card .card-body h3 {
        font-size: 15px !important;
      }
      #hot .feature-card .feature-hover {
        display: flex !important;
        padding: 16px 18px 18px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        color: #ffffff !important;
        background:
          radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.16), transparent 28%),
          linear-gradient(135deg, rgba(72, 76, 76, 0.78), rgba(128, 132, 128, 0.68)) !important;
        border: 1px solid rgba(81, 200, 218, 0.86) !important;
        box-shadow:
          0 18px 34px rgba(51, 130, 160, 0.20),
          inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
      }
      #hot .feature-card .feature-hover-title {
        gap: 10px !important;
      }
      #hot .feature-card .feature-hover-title .hover-icon {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
        border-radius: 7px !important;
      }
      #hot .feature-card .feature-hover b {
        font-size: 18px !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
      }
      #hot .feature-card .feature-hover p {
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        font-weight: 650 !important;
      }
      #hot .feature-card .feature-hover > span {
        margin-top: 0 !important;
        color: rgba(255, 255, 255, 0.76) !important;
        font-size: 12px !important;
        font-weight: 750 !important;
      }
      #hot .feature-card.compact {
        overflow: visible;
      }
      #hot .feature-card.compact > a {
        position: relative;
        overflow: hidden;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        align-items: center;
        min-height: 142px !important;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      }
      #hot .feature-card.compact:hover > a,
      #hot .feature-card.compact:focus-within > a {
        transform: translateY(-3px);
        border-color: rgba(83, 172, 231, 0.42);
        box-shadow: 0 18px 36px rgba(52, 126, 171, 0.16);
        background:
          radial-gradient(circle at var(--hot-x, 18%) var(--hot-y, 22%), rgba(83, 172, 231, 0.18), transparent 34%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 255, 0.72));
      }
      #hot .feature-card.compact:active > a,
      #hot .feature-card.compact.is-clicking > a {
        transform: translateY(-1px) scale(0.985);
      }
      #hot .feature-card .thumb {
        width: 52px !important;
        height: 52px !important;
        border-radius: 12px !important;
        background-color: #07111f !important;
        background-image: var(--art) !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 10px 24px rgba(20, 72, 112, 0.18);
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
      }
      #hot .feature-card .thumb::before,
      #hot .feature-card .thumb::after {
        display: none !important;
      }
      #hot .feature-card.compact:hover .thumb,
      #hot .feature-card.compact:focus-within .thumb {
        transform: scale(1.08) rotate(-2deg);
        box-shadow: 0 16px 34px rgba(20, 72, 112, 0.24);
        filter: saturate(1.08) contrast(1.04);
      }
      #hot .feature-card.is-clicking .thumb {
        animation: hotIconPop 0.34s ease;
      }
      #hot .feature-card .feature-hover-title .hover-icon {
        background-color: #07111f !important;
        background-image: var(--hover-icon) !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
      }
      #hot .feature-card .tap-ripple {
        position: absolute;
        left: var(--ripple-x);
        top: var(--ripple-y);
        width: 10px;
        height: 10px;
        border-radius: 999px;
        pointer-events: none;
        background: rgba(83, 172, 231, 0.26);
        transform: translate(-50%, -50%) scale(1);
        animation: hotRipple 0.52s ease-out forwards;
      }
      @keyframes hotRipple {
        to {
          opacity: 0;
          transform: translate(-50%, -50%) scale(32);
        }
      }
      @keyframes hotIconPop {
        0% { transform: scale(1.08) rotate(-2deg); }
        48% { transform: scale(0.94) rotate(1deg); }
        100% { transform: scale(1.08) rotate(-2deg); }
      }
      #directory .category-summary {
        min-height: 74px !important;
        padding: 14px !important;
        border-radius: 6px !important;
      }
      #directory .category-panel,
      #directory .category-summary {
        overflow: hidden !important;
      }
      #directory .category-panel::before,
      #directory .category-panel::after,
      #directory .category-summary::before,
      #directory .category-summary::after {
        display: none !important;
        content: none !important;
      }
      #directory .category-panel:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(83, 172, 231, 0.42) !important;
        box-shadow: 0 18px 36px rgba(52, 126, 171, 0.16) !important;
      }
      #directory .category-panel:hover .category-summary {
        border-color: rgba(83, 172, 231, 0.42) !important;
        box-shadow: none !important;
        background:
          radial-gradient(circle at var(--dir-x, 18%) var(--dir-y, 22%), rgba(83, 172, 231, 0.16), transparent 34%),
          linear-gradient(145deg, rgba(255,255,255,0.94), rgba(247,252,255,0.72)) !important;
      }
      #directory .category-panel:active,
      #directory .category-panel.is-clicking {
        transform: translateY(-1px) scale(0.985) !important;
      }
      #directory .category-panel .tap-ripple {
        position: absolute;
        left: var(--ripple-x);
        top: var(--ripple-y);
        width: 10px;
        height: 10px;
        border-radius: 999px;
        pointer-events: none;
        background: rgba(83, 172, 231, 0.24);
        transform: translate(-50%, -50%) scale(1);
        animation: hotRipple 0.52s ease-out forwards;
        z-index: 1;
      }
      #directory .category-icon {
        display: none !important;
      }
      #directory .category-title b {
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        color: #172236 !important;
      }
      #directory .category-title span {
        margin-top: 3px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        color: #6f7f92 !important;
      }
      #directory .category-count {
        font-size: 11px !important;
        padding: 5px 8px !important;
      }
      .run-board {
        grid-template-columns: 0.92fr 1.08fr !important;
        align-items: stretch !important;
        gap: 10px !important;
      }
      .run-panel {
        height: 100% !important;
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 6px !important;
      }
      .health-score strong {
        font-size: 44px !important;
      }
      .run-meta {
        gap: 8px !important;
        margin: 10px 0 !important;
      }
      .run-meta div,
      .project-stat {
        padding: 7px !important;
      }
      .metric-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      .project-card {
        padding: 10px !important;
        gap: 6px !important;
      }
      #workspace,
      .footer {
        display: none !important;
      }
    }

    /* 20260609 mobile hero compact frame: quote inside photo, desktop untouched */
    @media (max-width: 640px) {
      .hero {
        min-height: 0 !important;
        height: 330px !important;
        padding: 0 !important;
        border-radius: 18px !important;
        margin: 0 0 32px !important;
        overflow: hidden !important;
        box-shadow: 0 14px 34px rgba(25, 66, 106, 0.12) !important;
      }
      .hero-bg-slides,
      .hero-bg-slide {
        inset: 0 !important;
        border-radius: inherit !important;
        overflow: hidden !important;
      }
      .hero-bg-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 46% 30% !important;
        filter: saturate(1.02) brightness(0.96) contrast(0.98) !important;
      }
      .hero-bg-slide::after {
        background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.22) 58%, rgba(255,255,255,0.48) 100%) !important;
      }
      .hero-tabs,
      .hero-title {
        display: none !important;
      }
      .hero-top {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
      }
      .hero-quote {
        position: absolute !important;
        left: 34% !important;
        right: 22px !important;
        bottom: 62px !important;
        z-index: 2 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #b88916 !important;
        font-size: 16px !important;
        line-height: 1.72 !important;
        font-weight: 850 !important;
        text-shadow: 0 1px 2px rgba(255,255,255,0.72) !important;
      }
      .hero-quote::before,
      .hero-quote::after {
        display: none !important;
      }
      .hero-quote .quote-source {
        display: block !important;
        margin-top: 8px !important;
        color: rgba(55, 65, 81, 0.80) !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        text-align: center !important;
        text-shadow: 0 1px 2px rgba(255,255,255,0.72) !important;
      }

      #hot {
        margin-top: 0 !important;
      }
      #hot .card-grid .card.compact {
        min-height: 118px !important;
        height: 118px !important;
        border-radius: 12px !important;
        clip-path: none !important;
      }
      #hot .card-grid .card.compact a {
        min-height: 118px !important;
        height: 118px !important;
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 18px 20px !important;
      }
      #hot .card-grid .card.compact .thumb {
        width: 54px !important;
        height: 54px !important;
        border-radius: 12px !important;
      }
      #hot .card-grid .card.compact .card-body h3 {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
      }
      #hot .card-grid .card.compact .card-body p,
      #hot .card-grid .card.compact .meta {
        display: none !important;
      }
    }


    /* 20260609 mobile VPS master-detail: phone only */
    .vps-mobile-console { display: none; }
    @media (max-width: 640px) {
      #chunyu-home .section-head span { display: none !important; }
      #chunyu-home .run-board { display: none !important; }
      .vps-mobile-console { display: block; }
      .vps-mobile-list { display: grid; gap: 10px; }
      .vps-row {
        width: 100%; border: 1px solid rgba(112,180,230,.30); border-radius: 12px;
        background: rgba(255,255,255,.72); padding: 14px 12px; color: #122033;
        display: grid; grid-template-columns: 1.25fr .68fr .52fr .52fr .52fr; gap: 6px 8px;
        align-items: center; text-align: left; box-shadow: 0 10px 24px rgba(25,66,106,.08);
      }
      .vps-row b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .vps-row span { font-size: 12px; color: #415267; }
      .vps-row small { grid-column: 1 / -1; color: #7a8796; font-size: 11px; }
      .vps-state { width: fit-content; padding: 4px 8px; border-radius: 999px; font-weight: 800; }
      .vps-state.ok { color: #0d7c54; background: rgba(34,197,94,.12); }
      .vps-state.bad { color: #b42318; background: rgba(248,113,113,.14); }
      .vps-row.muted { opacity: .72; }
      .vps-mobile-console.detail-mode .vps-mobile-list { display: none; }
      .vps-mobile-detail { display: none; border: 1px solid rgba(112,180,230,.30); border-radius: 14px; background: rgba(255,255,255,.74); padding: 14px; box-shadow: 0 12px 28px rgba(25,66,106,.10); }
      .vps-mobile-detail.active { display: block; }
      .vps-back { border: 0; background: transparent; color: #2563eb; font-weight: 800; padding: 0 0 12px; }
      .vps-mobile-detail h3 { margin: 0 0 12px; color: #111827; font-size: 20px; }
      .vps-mobile-detail h4 { margin: 16px 0 10px; color: #334155; font-size: 14px; }
      .vps-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(148,163,184,.24); }
      .vps-kv span { color: #64748b; font-size: 12px; }
      .vps-kv b { color: #111827; font-size: 12px; text-align: right; }
      .vps-project { display: grid; gap: 4px; padding: 12px; margin-top: 8px; border-radius: 12px; background: rgba(241,245,249,.78); }
      .vps-project b { color: #111827; font-size: 14px; }
      .vps-project span { color: #64748b; font-size: 12px; }
      .vps-project em { justify-self: start; color: #0d7c54; font-style: normal; font-size: 12px; font-weight: 800; }
    }


    /* 20260609 mobile VPS gauge cards: clean tech, phone only */
    .vps-gauge-console { display: none; }
    @media (max-width: 640px) {
      #chunyu-home .run-board, #chunyu-home .vps-mobile-console { display: none !important; }
      #chunyu-home .section-head span { display: none !important; }
      .vps-gauge-console { display: grid; grid-template-columns: 1fr; gap: 12px; }
      .vps-gauge-card { text-decoration: none; color: #122033; min-height: 148px; border: 1px solid rgba(106,170,225,.28); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,247,255,.58)); box-shadow: 0 14px 32px rgba(24,70,110,.10); padding: 13px; display: grid; align-content: space-between; overflow: hidden; }
      .vps-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
      .vps-card-head b { font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .vps-card-head span { font-size: 11px; color:#0d7c54; background:rgba(34,197,94,.12); padding:4px 7px; border-radius:999px; font-weight:800; }
      .vps-gauge-card.offline .vps-card-head span { color:#b42318; background:rgba(248,113,113,.14); }
      .vps-gauge-card small { color:#64748b; font-size: 11px; line-height:1.35; }
      .vps-gauge { width: 74px; height: 74px; justify-self:center; border-radius:50%; position:relative; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.95) 0 35%, transparent 36%), conic-gradient(from 225deg, #38bdf8 0 90deg, #60a5fa 90deg 185deg, #f59e0b 185deg 235deg, #ef4444 235deg 270deg, transparent 270deg 360deg); box-shadow: inset 0 0 0 1px rgba(30,80,130,.12), 0 8px 20px rgba(45,110,170,.16); }
      .vps-gauge:before { content:""; position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(30,80,130,.10); }
      .vps-gauge i { position:absolute; left:50%; bottom:50%; width:2px; height:29px; border-radius:8px; background:#172033; transform-origin:50% 100%; transform: translateX(-50%) rotate(var(--needle)); box-shadow:0 0 0 1px rgba(255,255,255,.8); }
      .vps-gauge i:after { content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; border-radius:50%; background:#172033; transform:translateX(-50%); }
    }


    /* 20260609 mobile VPS current-load dots */
    @media (max-width: 640px) {
      .vps-gauge-wrap { display:grid; place-items:center; gap:6px; }
      .vps-gauge-wrap em { font-style:normal; color:#475569; font-size:12px; font-weight:800; }
      .vps-dots { display:flex; justify-content:center; gap:6px; margin-top:2px; }
      .vps-dots span { font-size:10px; padding:3px 6px; border-radius:999px; font-weight:800; }
      .vps-dots .ok { color:#0d7c54; background:rgba(34,197,94,.12); }
      .vps-dots .warn { color:#a16207; background:rgba(245,158,11,.15); }
      .vps-dots .bad { color:#b42318; background:rgba(248,113,113,.14); }
    }


    /* 20260609 mobile VPS max-resource gauge */
    @media (max-width: 640px) {
      .vps-gauge-card .vps-gauge { background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.96) 0 35%, transparent 36%), conic-gradient(from 225deg, var(--gauge-color,#22c55e) 0 270deg, transparent 270deg 360deg) !important; }
      .vps-gauge-wrap em { color: var(--gauge-color,#0d7c54) !important; }
      .vps-dots { display:none !important; }
      .vps-gauge-card.offline { --gauge-color:#ef4444; }
    }


    /* 20260609 mobile VPS three mini gauges */
    @media (max-width: 640px) {
      .vps-gauge-card { min-height: 126px !important; }
      .vps-gauge-wrap, .vps-dots { display:none !important; }
      .vps-mini-gauges { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center; margin:6px 0 2px; }
      .mini-gauge-box { display:grid; place-items:center; gap:4px; }
      .mini-gauge-box em { font-style:normal; font-size:10px; color:#475569; font-weight:800; }
      .mini-gauge { width:48px; height:48px; border-radius:50%; position:relative; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.97) 0 35%, transparent 36%), conic-gradient(from 225deg, var(--gauge-color,#22c55e) 0 var(--arc), rgba(148,163,184,.16) var(--arc) 270deg, transparent 270deg 360deg) !important; box-shadow: inset 0 0 0 1px rgba(30,80,130,.10), 0 6px 14px rgba(45,110,170,.10); }
      .mini-gauge i { position:absolute; left:50%; bottom:50%; width:2px; height:19px; border-radius:8px; background:#172033; transform-origin:50% 100%; transform:translateX(-50%) rotate(var(--needle)); }
      .mini-gauge i:after { content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; border-radius:50%; background:#172033; transform:translateX(-50%); }
    }



    /* 20260610 desktop VPS multi-card gauges */
    @media (min-width: 641px) {
      #chunyu-home .vps-gauge-console {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 8px 0 18px;
      }
      #chunyu-home .vps-gauge-card {
        display: grid !important;
        min-height: 138px;
        padding: 16px;
        align-content: space-between;
        text-decoration: none;
        color: #122033;
        border: 1px solid rgba(170, 207, 230, 0.66);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,250,255,.76));
        box-shadow: 0 14px 32px rgba(24,70,110,.10);
        overflow: hidden;
      }
      #chunyu-home .vps-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
      #chunyu-home .vps-card-head b { font-size: 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      #chunyu-home .vps-card-head span { font-size: 11px; color:#059669; background:rgba(34,197,94,.12); padding:4px 8px; border-radius:999px; font-weight:800; }
      #chunyu-home .vps-gauge-card.offline .vps-card-head span { color:#dc2626; background:rgba(248,113,113,.13); }
      #chunyu-home .vps-gauge-card small { color: #334155; font-size: 13px; line-height:1.35; font-weight:800; letter-spacing:.02em; }
      #chunyu-home .vps-mini-gauges { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center; margin:8px 0 4px; }
      #chunyu-home .mini-gauge-box { display:grid; place-items:center; gap:5px; }
      #chunyu-home .mini-gauge-box em { font-style:normal; font-size:11px; color:#475569; font-weight:800; }
      #chunyu-home .mini-gauge { width:56px; height:56px; border-radius:50%; position:relative; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.94) 0 35%, transparent 36%), conic-gradient(from 225deg, var(--gauge-color,#22c55e) 0 var(--arc), rgba(148,163,184,.18) var(--arc) 270deg, transparent 270deg 360deg) !important; box-shadow: inset 0 0 0 1px rgba(160,210,255,.12), 0 8px 18px rgba(0,0,0,.18); }
      #chunyu-home .mini-gauge i { position:absolute; left:50%; bottom:50%; width:2px; height:22px; border-radius:8px; background:#172033; transform-origin:50% 100%; transform:translateX(-50%) rotate(var(--needle)); }
      #chunyu-home .mini-gauge i:after { content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; border-radius:50%; background:#172033; transform:translateX(-50%); }
    }

    /* 20260610 mobile fixed bottom carousel background */
    @media (max-width: 760px) {
      .page-photo-bg {
        display: block !important;
        position: fixed !important;
        inset: auto 0 0 0 !important;
        height: 58vh !important;
        z-index: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        background: transparent !important;
      }
      .page-photo-bg span {
        inset: 0 !important;
        background-size: cover !important;
        background-position: center bottom !important;
        filter: saturate(1.08) contrast(1.02) brightness(1.04) !important;
        transform: scale(1.02) !important;
      }
      .page-photo-bg::after {
        background:
          linear-gradient(180deg, rgba(247,248,251,.96) 0%, rgba(247,248,251,.72) 24%, rgba(247,248,251,.34) 58%, rgba(247,248,251,.16) 100%),
          linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
      }
      .app {
        position: relative !important;
        z-index: 1 !important;
        background: linear-gradient(180deg, #f7f8fb 0%, rgba(247,248,251,.90) 42%, rgba(247,248,251,.62) 100%) !important;
      }
      .hero {
        min-height: 132px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
        overflow: visible !important;
      }
      .hero-bg-slides,
      .hero-bg-slide,
      .hero-bg-slide img {
        display: none !important;
      }
    }


    /* 20260610 mobile bottom carousel visibility tune */
    @media (max-width: 760px) {
      .page-photo-bg {
        height: 100vh !important;
        opacity: 1 !important;
      }
      .page-photo-bg span {
        background-position: center bottom !important;
        opacity: 0;
      }
      .page-photo-bg::after {
        background:
          linear-gradient(180deg, rgba(247,248,251,1) 0%, rgba(247,248,251,.96) 34%, rgba(247,248,251,.70) 58%, rgba(247,248,251,.24) 100%) !important;
      }
      .app {
        background: linear-gradient(180deg, #f7f8fb 0%, rgba(247,248,251,.92) 38%, rgba(247,248,251,.42) 100%) !important;
      }
      section, .card, .link-card, .category-card, .vps-gauge-card {
        backdrop-filter: blur(14px) saturate(1.04) !important;
      }
    }


    /* 20260610 mobile bottom carousel transparent page layer */
    @media (max-width: 760px) {
      body { background: #f7f8fb !important; }
      .app { background: transparent !important; }
      .page-photo-bg { z-index: 0 !important; }
      .page-photo-bg::after { background: linear-gradient(180deg, rgba(247,248,251,1) 0%, rgba(247,248,251,.88) 35%, rgba(247,248,251,.48) 64%, rgba(247,248,251,.10) 100%) !important; }
      .main, main, .content, .section, .panel, .cards, .links-grid { position: relative; z-index: 1; }
    }


    /* 20260610 mobile clear bottom carousel: sharper image + translucent content */
    @media (max-width: 760px) {
      .page-photo-bg {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        height: 100vh !important;
        z-index: 0 !important;
        opacity: 1 !important;
        background: #f7f8fb !important;
      }
      .page-photo-bg span {
        background-size: cover !important;
        background-position: center bottom !important;
        filter: saturate(1.18) contrast(1.10) brightness(1.02) !important;
        transform: scale(1.01) !important;
      }
      .page-photo-bg::after {
        background:
          linear-gradient(180deg, rgba(247,248,251,.92) 0%, rgba(247,248,251,.70) 30%, rgba(247,248,251,.34) 58%, rgba(247,248,251,.04) 100%) !important;
      }
      body,
      .app {
        background: transparent !important;
      }
      .content,
      .section,
      .panel,
      .card,
      .category-card,
      .link-card,
      .vps-gauge-card,
      .server-card,
      .tool-card,
      .quick-card,
      .status-card {
        background: rgba(255,255,255,.50) !important;
        border-color: rgba(255,255,255,.50) !important;
        backdrop-filter: blur(11px) saturate(1.16) !important;
        -webkit-backdrop-filter: blur(11px) saturate(1.16) !important;
        box-shadow: 0 16px 42px rgba(15,23,42,.10) !important;
      }
      .hero,
      .topbar,
      .quick-nav-toggle {
        background: rgba(255,255,255,.34) !important;
        backdrop-filter: blur(9px) saturate(1.12) !important;
        -webkit-backdrop-filter: blur(9px) saturate(1.12) !important;
      }
      .link-card:hover,
      .category-card:hover {
        background: rgba(255,255,255,.62) !important;
      }
    }


    /* 20260610 mobile: compact transparent quote + clear wallpaper */
    @media (max-width: 760px) {
      .page-photo-bg span {
        filter: saturate(1.28) contrast(1.16) brightness(1.05) !important;
        transform: scale(1.005) !important;
      }
      .page-photo-bg::after {
        background:
          linear-gradient(180deg, rgba(247,248,251,.70) 0%, rgba(247,248,251,.44) 28%, rgba(247,248,251,.20) 56%, rgba(247,248,251,.02) 100%) !important;
      }
      .hero {
        min-height: 88px !important;
        margin: 8px 0 16px !important;
        padding: 12px 14px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .hero-top {
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
      }
      .hero-quote {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .hero-quote .quote-main {
        font-size: 15px !important;
        line-height: 1.58 !important;
        color: rgba(125,92,8,.92) !important;
        text-shadow: 0 1px 8px rgba(255,255,255,.45) !important;
      }
      .hero-quote .quote-source {
        margin-top: 6px !important;
        font-size: 12px !important;
        color: rgba(49,61,79,.72) !important;
      }
      .section,
      section,
      .panel {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .section-title,
      .section-subtitle,
      .section h2,
      section h2 {
        text-shadow: 0 1px 10px rgba(255,255,255,.56) !important;
      }
      .link-card,
      .category-card,
      .quick-card,
      .tool-card,
      .status-card,
      .vps-gauge-card,
      .server-card {
        background: rgba(255,255,255,.30) !important;
        border-color: rgba(255,255,255,.42) !important;
        backdrop-filter: blur(6px) saturate(1.05) !important;
        -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
        box-shadow: 0 10px 28px rgba(15,23,42,.10) !important;
      }
      .link-card:hover,
      .category-card:hover {
        background: rgba(255,255,255,.42) !important;
      }
      .main, main { padding-top: 0 !important; }
    }


    /* 20260610 mobile self-review pass: shorter quote, clearer photo, transparent hot cards */
    @media (max-width: 760px) {
      .page-photo-bg::after {
        background: linear-gradient(180deg, rgba(247,248,251,.46) 0%, rgba(247,248,251,.24) 34%, rgba(247,248,251,.10) 62%, rgba(247,248,251,0) 100%) !important;
      }
      .page-photo-bg span {
        filter: saturate(1.36) contrast(1.22) brightness(1.06) !important;
      }
      .hero {
        height: 142px !important;
        min-height: 0 !important;
        max-height: 142px !important;
        padding: 54px 20px 8px !important;
        margin: 0 0 8px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: hidden !important;
      }
      .hero-top {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        transform: none !important;
      }
      .hero-quote {
        padding: 0 !important;
        background: transparent !important;
      }
      .hero-quote .quote-main {
        font-size: 14px !important;
        line-height: 1.48 !important;
      }
      .hero-quote .quote-source {
        font-size: 11px !important;
        margin-top: 4px !important;
      }
      .content-section,
      .section-head {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .card,
      .card.compact,
      .feature-card,
      .category-panel {
        background: rgba(255,255,255,.24) !important;
        border-color: rgba(255,255,255,.36) !important;
        backdrop-filter: blur(4px) saturate(1.05) !important;
        -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
        box-shadow: 0 10px 26px rgba(15,23,42,.09) !important;
      }
      .card a,
      .feature-card a,
      .card-body {
        background: transparent !important;
      }
    }


    /* 20260610 mobile quote clipping fix after self-review */
    @media (max-width: 760px) {
      .hero {
        height: 128px !important;
        max-height: 128px !important;
        padding: 18px 72px 8px 24px !important;
        align-items: center !important;
      }
      .hero-quote .quote-main {
        display: block !important;
        max-height: 48px !important;
        overflow: hidden !important;
      }
      .hero-quote .quote-source {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
      }
    }


    /* 20260610 mobile real-device fix: avoid menu overlap, unify transparent cards */
    @media (max-width: 760px) {
      .quick-nav-toggle {
        z-index: 30 !important;
        background: rgba(255,255,255,.28) !important;
        border-color: rgba(255,255,255,.34) !important;
        backdrop-filter: blur(5px) saturate(1.05) !important;
        -webkit-backdrop-filter: blur(5px) saturate(1.05) !important;
      }
      .hero {
        height: 106px !important;
        max-height: 106px !important;
        margin: 0 0 10px !important;
        padding: 18px 70px 8px 16px !important;
        align-items: flex-start !important;
      }
      .hero-quote {
        max-width: calc(100vw - 104px) !important;
        text-align: left !important;
      }
      .hero-quote .quote-main {
        max-height: 42px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
      }
      .hero-quote .quote-source {
        text-align: left !important;
        max-width: 100% !important;
      }
      #hot .card,
      #hot .feature-card,
      #hot .card a,
      #hot .card-body,
      #hot .thumb,
      #hot .thumb::before,
      #hot .thumb::after {
        background-color: rgba(255,255,255,.18) !important;
      }
      #hot .card,
      .content-section .card,
      .category-panel {
        background: rgba(255,255,255,.22) !important;
        border-color: rgba(255,255,255,.30) !important;
        backdrop-filter: blur(3px) saturate(1.03) !important;
        -webkit-backdrop-filter: blur(3px) saturate(1.03) !important;
      }
      #hot .thumb img {
        opacity: .92 !important;
      }
      .page-photo-bg::after {
        background: linear-gradient(180deg, rgba(247,248,251,.36) 0%, rgba(247,248,251,.18) 32%, rgba(247,248,251,.06) 64%, rgba(247,248,251,0) 100%) !important;
      }
    }


    /* 20260610 mobile self-audit cleanup: no inner white blocks */
    @media (max-width: 760px) {
      .hero {
        height: 96px !important;
        max-height: 96px !important;
        padding: 10px 70px 6px 16px !important;
        display: flex !important;
        align-items: center !important;
      }
      .hero-top {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
      }
      .hero-quote .quote-main {
        max-height: 38px !important;
        overflow: hidden !important;
      }
      #hot .card,
      #hot .feature-card {
        background: rgba(255,255,255,.20) !important;
      }
      #hot .card *,
      #hot .feature-card *,
      #hot .card *::before,
      #hot .card *::after,
      #hot .feature-card *::before,
      #hot .feature-card *::after {
        background-color: transparent !important;
        box-shadow: none !important;
      }
      #hot .thumb,
      #hot .thumb img {
        background: transparent !important;
      }
      #hot .card-body {
        padding-left: 0 !important;
      }
      .card,
      .category-panel,
      .link-card {
        background: rgba(255,255,255,.20) !important;
        border-color: rgba(255,255,255,.28) !important;
      }
    }


    /* 20260610 mobile quote visible compact final */
    @media (max-width: 760px) {
      .hero {
        height: auto !important;
        min-height: 78px !important;
        max-height: 96px !important;
        padding: 14px 72px 10px 16px !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
      }
      .hero-top,
      .hero-quote {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      .hero-quote .quote-main {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-height: none !important;
        overflow: hidden !important;
        color: rgba(112,80,8,.98) !important;
        text-shadow: 0 1px 8px rgba(255,255,255,.72) !important;
      }
      .hero-quote .quote-source {
        display: none !important;
      }
    }


    /* 20260610 mobile bottom bg JS loop fix: no one-shot CSS delay */
    @media (max-width: 760px) {
      .page-photo-bg span {
        animation: none !important;
        opacity: 0 !important;
        transition: opacity 1.2s ease !important;
      }
      .page-photo-bg span.active {
        opacity: .96 !important;
      }
    }


    /* 20260610 mobile fullbody portrait head-safe */
    @media (max-width: 760px) {
      .page-photo-bg span.fullbody-photo {
        background-size: auto 82vh !important;
        background-position: center 58% !important;
        background-repeat: no-repeat !important;
        transform: none !important;
      }
    }


    /* 20260610 mobile portrait per-image sizing self-reviewed */
    @media (max-width: 760px) {
      .page-photo-bg span.mobile-extra-01,
      .page-photo-bg span.mobile-extra-04 {
        background-size: auto 100vh !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
        transform: none !important;
      }
      .page-photo-bg span.mobile-extra-02,
      .page-photo-bg span.mobile-extra-03 {
        background-size: auto 100vh !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
        transform: none !important;
      }
    }


    /* 20260610 mobile transparent site title */
    .mobile-site-title { display: none; }
    @media (max-width: 860px) {
      .topbar {
        background: rgba(255,255,255,.16) !important;
        border-bottom: 1px solid rgba(15,23,42,.08) !important;
        box-shadow: none !important;
        backdrop-filter: blur(4px) saturate(1.04) !important;
        -webkit-backdrop-filter: blur(4px) saturate(1.04) !important;
        padding: 14px 58px 12px 10px !important;
        margin: 0 0 8px !important;
      }
      .topbar .crumb,
      .topbar .topmeta { display: none !important; }
      .mobile-site-title {
        display: block !important;
        margin: 0 !important;
        color: rgba(15,23,42,.94) !important;
        font-size: clamp(26px, 7.2vw, 32px) !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        letter-spacing: -.04em !important;
        text-shadow: 0 1px 10px rgba(255,255,255,.42) !important;
        white-space: nowrap !important;
      }
      body.dark .mobile-site-title { color: rgba(248,250,252,.94) !important; }
    }


    /* 20260610 mobile fixed visible title */
    .mobile-floating-title { display: none; }
    @media (max-width: 860px) {
      .mobile-floating-title {
        display: block !important;
        position: fixed !important;
        left: 14px !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        z-index: 32 !important;
        max-width: calc(100vw - 78px) !important;
        padding: 2px 0 !important;
        background: transparent !important;
        color: rgba(15,23,42,.96) !important;
        font-size: clamp(26px, 7.6vw, 34px) !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: -.045em !important;
        text-shadow: 0 1px 12px rgba(255,255,255,.68), 0 8px 30px rgba(15,23,42,.12) !important;
        white-space: nowrap !important;
        pointer-events: none !important;
      }
      body.dark .mobile-floating-title { color: rgba(248,250,252,.96) !important; }
      .quick-nav-toggle { top: max(12px, env(safe-area-inset-top)) !important; z-index: 34 !important; }
      .main { padding-top: 44px !important; }
    }


    /* 20260610 hide duplicate mobile title in topbar */
    @media (max-width: 860px) {
      .topbar .mobile-site-title { display: none !important; }
      .topbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; }
    }


    /* 20260610 mobile hide golden quote */
    @media (max-width: 860px) {
      .hero-quote,
      .hero-quote .quote-main,
      .hero-quote .quote-source,
      .hero-quote::before,
      .hero-quote::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      .hero-top { display: none !important; }
      .hero { min-height: 0 !important; height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
    }


    /* 20260610 mobile seamless background integration */
    @media (max-width: 860px) {
      html, body, .app, .main {
        background: transparent !important;
        background-color: transparent !important;
      }
      body::before, body::after,
      .app::before, .app::after,
      .main::before, .main::after {
        background: transparent !important;
        box-shadow: none !important;
      }
      .page-photo-bg {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: -3 !important;
        background: transparent !important;
        pointer-events: none !important;
        overflow: hidden !important;
      }
      .page-photo-bg span {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: transparent !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
        filter: saturate(1.12) contrast(1.04) brightness(1.03) !important;
      }
      .page-photo-bg::before,
      .page-photo-bg::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
      }
      .page-photo-bg::before {
        background: linear-gradient(180deg, rgba(247,250,255,.18) 0%, rgba(247,250,255,.08) 34%, rgba(247,250,255,0) 72%) !important;
        z-index: 2 !important;
      }
      .page-photo-bg::after {
        background: linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0)) !important;
        z-index: 3 !important;
      }
      .topbar, .hero, .hero-bg-slides, .hero-bg-slide, .hero::before, .hero::after,
      .content-section, .section-head {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .topbar {
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
      }
      .hero, .hero-bg-slides, .hero-bg-slide, .hero-network, .hero-tabs {
        display: none !important;
      }
      .content-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      .section-head {
        margin: 8px 0 10px !important;
        padding: 0 2px !important;
      }
      .card, .compact, .feature-card, .link-card, .category-card, .category-panel,
      .tool-card, .quick-card, .status-card, .node-card, .node-project {
        background: rgba(255,255,255,.22) !important;
        border-color: rgba(255,255,255,.24) !important;
        box-shadow: 0 10px 30px rgba(15,23,42,.08) !important;
        backdrop-filter: blur(3px) saturate(1.04) !important;
        -webkit-backdrop-filter: blur(3px) saturate(1.04) !important;
      }
      .main {
        padding-top: 56px !important;
      }
    }


    /* 20260610 mobile seamless background z-layer fix */
    @media (max-width: 860px) {
      .page-photo-bg { z-index: 0 !important; }
      .app, .main { position: relative !important; z-index: 1 !important; }
      .stars, #sky, .aurora, .noise { opacity: 0 !important; }
      .card, .compact, .feature-card, .link-card, .category-card, .category-panel,
      .tool-card, .quick-card, .status-card, .node-card, .node-project {
        background: rgba(255,255,255,.16) !important;
        border-color: rgba(255,255,255,.12) !important;
        box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
        backdrop-filter: blur(2px) saturate(1.02) !important;
        -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
      }
      .feature-card::before, .card::before, .card::after,
      .content-section::before, .content-section::after {
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
      }
    }

  


/* 20260610 phone-only: transparent hot/vps cards + directory title-only */
@media (max-width: 760px) {
  #hot .card,
  #hot .card.compact,
  #hot .feature-card,
  #hot .feature-card > a,
  #hot .card-body,
  #chunyu-home .vps-gauge-card,
  #chunyu-home .run-panel,
  #chunyu-home .status-card {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #hot .feature-card .thumb {
    background: transparent !important;
    box-shadow: none !important;
  }
  #directory .category-panel {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #directory .category-summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 2px !important;
    min-height: 0 !important;
  }
  #directory .category-icon,
  #directory .category-count,
  #directory .category-content {
    display: none !important;
  }
  #directory .category-title b {
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.38), 0 0 1px rgba(0,0,0,.8) !important;
  }
  #directory .category-title span {
    display: block !important;
    color: rgba(255,255,255,.76) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.36) !important;
  }
}



/* 20260610 phone-only: restore light frames for readable transparent sections */
@media (max-width: 760px) {
  #hot .feature-card,
  #hot .feature-card > a,
  #chunyu-home .vps-gauge-card,
  #directory .category-panel {
    border: 1px solid rgba(255,255,255,.46) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  }
  #hot .feature-card > a,
  #directory .category-summary,
  #chunyu-home .vps-gauge-card {
    padding: 12px !important;
  }
  #directory .category-summary {
    border-radius: 16px !important;
  }
}



/* 20260610 phone-only: slight frosted layer for readable transparent cards */
@media (max-width: 760px) {
  #hot .feature-card,
  #hot .feature-card > a,
  #chunyu-home .vps-gauge-card,
  #directory .category-panel {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.54) !important;
    backdrop-filter: blur(5px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(5px) saturate(1.06) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.13) !important;
  }
}



/* 20260610 phone-only: ultra light frost final */
@media (max-width: 760px) {
  #hot .feature-card,
  #hot .feature-card > a,
  #chunyu-home .vps-gauge-card,
  #directory .category-panel {
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(2px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
  }
}



/* 20260610 phone-only: clearer section card borders, keep inner style */
@media (max-width: 760px) {
  #hot .feature-card,
  #chunyu-home .vps-gauge-card,
  #directory .category-panel {
    border: 1.5px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 0 0 1px rgba(20,30,45,.10), 0 8px 20px rgba(0,0,0,.10) !important;
  }
}



/* 20260610 phone-only: subtle 3D raised border */
@media (max-width: 760px) {
  #hot .feature-card,
  #chunyu-home .vps-gauge-card,
  #directory .category-panel {
    border-color: rgba(255,255,255,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.62),
      inset 0 -1px 0 rgba(20,30,45,.10),
      0 1px 0 rgba(255,255,255,.36),
      0 10px 22px rgba(0,0,0,.14) !important;
  }
}



/* 20260610 phone-only: readable nav drawer */
@media (max-width: 760px) {
  .nav-drawer,
  .nav-panel,
  .quick-nav-panel {
    background: rgba(248,250,255,.72) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
  }
  .nav-drawer h1,
  .nav-drawer h2,
  .nav-drawer h3,
  .nav-drawer .title,
  .nav-drawer a,
  .nav-drawer button,
  .nav-drawer strong,
  .nav-panel h1,
  .nav-panel h2,
  .nav-panel h3,
  .nav-panel a,
  .nav-panel button {
    color: rgba(8,18,32,.94) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
  }
  .nav-drawer p,
  .nav-drawer .desc,
  .nav-drawer small,
  .nav-panel p,
  .nav-panel .desc,
  .nav-panel small {
    color: rgba(35,48,68,.78) !important;
  }
  .nav-drawer .nav-card,
  .nav-drawer .drawer-card,
  .nav-drawer li,
  .nav-panel .nav-card,
  .nav-panel .drawer-card,
  .quick-nav-panel .nav-card {
    background: rgba(255,255,255,.34) !important;
    border-color: rgba(255,255,255,.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 8px 18px rgba(0,0,0,.10) !important;
  }
}



/* 20260610 phone-only: nav drawer white bold readable text */
@media (max-width: 760px) {
  .nav-drawer,
  .nav-panel,
  .quick-nav-panel {
    background: rgba(10,18,30,.34) !important;
    backdrop-filter: blur(6px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  }
  .nav-drawer *,
  .nav-panel *,
  .quick-nav-panel * {
    color: rgba(255,255,255,.96) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.62), 0 0 1px rgba(0,0,0,.90) !important;
  }
  .nav-drawer p,
  .nav-drawer .desc,
  .nav-drawer small,
  .nav-panel p,
  .nav-panel .desc,
  .nav-panel small,
  .quick-nav-panel p,
  .quick-nav-panel .desc,
  .quick-nav-panel small {
    color: rgba(255,255,255,.88) !important;
    font-weight: 600 !important;
  }
}



/* 20260610 mobile bg portraits smaller + include all mobile photos */
@media (max-width: 760px) {
  .page-photo-bg span.fullbody-photo,
  .page-photo-bg span.mobile-extra-01,
  .page-photo-bg span.mobile-extra-02,
  .page-photo-bg span.mobile-extra-03,
  .page-photo-bg span.mobile-extra-04 {
    background-size: auto 86vh !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}



/* 20260610 mobile bg: remove white seam + show all photos */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; background: #d7e8f7 !important; }
  .site-photo-bg, .page-photo-bg { background: #d7e8f7 !important; }
  .site-photo-bg span,
  .page-photo-bg span {
    animation: none !important;
    opacity: 0 !important;
    transition: opacity 1.2s ease !important;
    background-color: #d7e8f7 !important;
  }
  .site-photo-bg span.active,
  .page-photo-bg span.active { opacity: .96 !important; }
  .site-photo-bg span.mobile-portrait,
  .page-photo-bg span.fullbody-photo,
  .page-photo-bg span.mobile-extra-01,
  .page-photo-bg span.mobile-extra-02,
  .page-photo-bg span.mobile-extra-03,
  .page-photo-bg span.mobile-extra-04 {
    background-size: auto 80vh !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
  .site-photo-bg span.web-photo,
  .page-photo-bg span.web-photo {
    background-size: cover !important;
    background-position: center !important;
  }
}



/* 20260610 force new mobile wallpaper visible */
@media (max-width: 760px) {
  .page-photo-bg { display:block!important; position:fixed!important; inset:0!important; z-index:0!important; opacity:1!important; background:#d7e8f7!important; pointer-events:none!important; }
  .page-photo-bg span { position:absolute!important; inset:0!important; opacity:0!important; background-size:auto 92vh!important; background-position:center bottom!important; background-repeat:no-repeat!important; filter:saturate(1.08) contrast(1.04) brightness(1.02)!important; transition:opacity 1s ease!important; }
  .page-photo-bg span.active { opacity:.92!important; }
  .page-photo-bg::after { content:""!important; position:absolute!important; inset:0!important; background:linear-gradient(180deg,rgba(216,233,247,.46) 0%,rgba(216,233,247,.20) 42%,rgba(216,233,247,.04) 100%)!important; pointer-events:none!important; }
  body,.app { background:transparent!important; }
}



/* 20260610 mobile wallpaper full-screen cover */
@media (max-width: 760px) {
  .page-photo-bg span.fullbody-photo,
  .page-photo-bg span[class*="mobile-extra-"],
  .page-photo-bg span {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}



/* 20260610 final mobile wallpapers: 8 images full-screen */
@media (max-width: 760px) {
  .page-photo-bg { display:block!important; position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important; z-index:0!important; opacity:1!important; background:#000!important; pointer-events:none!important; overflow:hidden!important; }
  .page-photo-bg span { position:absolute!important; inset:0!important; width:100vw!important; height:100vh!important; opacity:0!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; transform:none!important; filter:saturate(1.05) contrast(1.03) brightness(1.02)!important; transition:opacity 1s ease!important; }
  .page-photo-bg span.active { opacity:.96!important; }
  .page-photo-bg::after { content:""!important; position:absolute!important; inset:0!important; background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.03) 45%,rgba(0,0,0,.08))!important; pointer-events:none!important; }
  .page-photo-bg span.web-photo { display:none!important; }
  body,.app { background:transparent!important; }
}



/* 20260610 mobile wallpaper brighten */
@media (max-width: 760px) {
  .page-photo-bg { background:#eaf4ff!important; }
  .page-photo-bg span { filter:saturate(1.12) contrast(1.02) brightness(1.30)!important; opacity:0!important; }
  .page-photo-bg span.active { opacity:1!important; }
  .page-photo-bg::after { background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 42%,rgba(255,255,255,0) 100%)!important; }
}



/* 20260610 real uploaded mobile wallpapers only */
@media (max-width: 760px) {
  .page-photo-bg { display:block!important; position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important; z-index:0!important; opacity:1!important; background:#eef7ff!important; pointer-events:none!important; overflow:hidden!important; }
  .page-photo-bg span { position:absolute!important; inset:0!important; width:100vw!important; height:100vh!important; opacity:0!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; background-image:var(--bg)!important; transform:none!important; filter:saturate(1.18) contrast(1.06) brightness(1.18)!important; transition:opacity 1s ease!important; }
  .page-photo-bg span.active { opacity:.98!important; }
  .page-photo-bg span.web-photo { display:none!important; }
  .page-photo-bg::after { content:""!important; position:absolute!important; inset:0!important; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.10))!important; pointer-events:none!important; }
  body,.app { background:transparent!important; }
}



/* 20260610 mobile column frames stronger */
@media (max-width: 760px) {
  #hot .card,
  #hot .feature-card,
  #hot .card.compact,
  #hot .feature-card.compact,
  #directory .category-panel,
  #directory .category-summary,
  #chunyu-home .vps-gauge-card,
  #chunyu-home .status-card,
  .site-section .card,
  .section-card {
    background: rgba(255,255,255,.24) !important;
    border: 1.6px solid rgba(255,255,255,.86) !important;
    box-shadow:
      0 0 0 1px rgba(20,35,55,.10),
      inset 0 1px 0 rgba(255,255,255,.78),
      0 12px 32px rgba(15,23,42,.16) !important;
    backdrop-filter: blur(3.5px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(3.5px) saturate(1.16) !important;
    border-radius: 18px !important;
  }
  #hot .card a,
  #hot .feature-card > a,
  #directory .category-summary {
    background: rgba(255,255,255,.10) !important;
    border: 0 !important;
  }
  #hot h2,
  #directory h2,
  #chunyu-home h2,
  #hot .card-body h3,
  #hot .feature-card h3,
  #directory .category-title b {
    color: #0b1628 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 10px rgba(255,255,255,.35) !important;
    font-weight: 900 !important;
  }
  #hot .section-head span,
  #directory .section-head span,
  #hot .card-body p,
  #directory .category-title span {
    color: rgba(15,23,42,.78) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.50) !important;
  }
}



    /* 20260610 clean-tech unified polish */
    :root{--bg:#0b0f17;--bg-2:#101722;--panel:rgba(15,23,36,.68);--panel-strong:rgba(18,28,43,.86);--panel-soft:rgba(125,211,252,.07);--line:rgba(148,197,255,.16);--line-strong:rgba(125,211,252,.34);--text:#edf6ff;--muted:#94a8bd;--soft:#c8d7e7;--accent:#67e8f9;--accent-2:#8b5cf6;--accent-3:#f6c76b;--radius:16px;--shadow:0 18px 48px rgba(0,0,0,.26)}
    body{background:radial-gradient(circle at 12% 0%,rgba(103,232,249,.13),transparent 30%),radial-gradient(circle at 88% 8%,rgba(139,92,246,.15),transparent 32%),linear-gradient(180deg,#080c13 0%,#0d1320 46%,#080c13 100%)!important}
    body::before,body::after,.aurora,#sky{opacity:.12!important}.app{grid-template-columns:260px minmax(0,1fr)!important}
    aside{background:rgba(9,14,22,.78)!important;border-right:1px solid rgba(125,211,252,.15)!important;backdrop-filter:blur(18px) saturate(1.15)!important;box-shadow:8px 0 34px rgba(0,0,0,.18)!important}
    .logo b{background:linear-gradient(135deg,#eaf8ff 0%,#67e8f9 48%,#a78bfa 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;letter-spacing:-.03em!important}
    .menu{gap:5px!important}.menu a{min-height:42px!important;padding:10px 12px!important;border-radius:12px!important;color:rgba(226,238,250,.82)!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}.menu a:hover,.menu a.active{color:#fff!important;background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(139,92,246,.10))!important;border-color:rgba(103,232,249,.24)!important;transform:none!important}
    main{max-width:1360px!important;padding:28px clamp(22px,3vw,42px) 64px!important}.hero,section,.card,.link-card,.category-panel,.category-card,.run-panel,.vps-gauge-card,.tool-card,.status-card,.quick-card{background:linear-gradient(145deg,rgba(16,24,38,.76),rgba(12,18,29,.58))!important;border:1px solid rgba(125,211,252,.16)!important;border-radius:16px!important;box-shadow:0 16px 44px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045)!important;backdrop-filter:blur(14px) saturate(1.12)!important;-webkit-backdrop-filter:blur(14px) saturate(1.12)!important;color:var(--text)!important}.hero{min-height:190px!important;overflow:hidden!important}
    .hero h1,h1,h2,h3,.section-head b,.category-title b,.run-panel-head b,.vps-card-head b{color:#f3fbff!important;letter-spacing:-.02em!important}.section-head span,p,small,.meta,.category-title span,.run-panel-head span{color:rgba(196,214,231,.72)!important}.link-card:hover,.category-card:hover,.vps-gauge-card:hover{border-color:rgba(103,232,249,.34)!important;transform:translateY(-2px)!important;box-shadow:0 20px 54px rgba(0,0,0,.28),0 0 0 1px rgba(103,232,249,.08)!important}.category-list,.links-grid,.card-grid{gap:14px!important}#directory .category-summary{min-height:78px!important;padding:16px!important}
    #chunyu-home .vps-gauge-card{color:#122033!important;background:rgba(255,255,255,.50)!important;border-color:rgba(255,255,255,.62)!important;box-shadow:0 14px 34px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.55)!important}#chunyu-home .vps-gauge-card small{color:rgba(30,48,70,.72)!important}#chunyu-home .vps-card-head b{color:#102033!important}#chunyu-home .vps-card-head span,.run-ok{color:#059669!important;background:rgba(209,250,229,.58)!important}#chunyu-home .mini-gauge{box-shadow:inset 0 0 0 1px rgba(30,80,130,.10),0 6px 14px rgba(45,110,170,.10)!important}.sidebar-music-console{border-color:rgba(103,232,249,.18)!important;background:rgba(12,20,32,.62)!important}
    @media (prefers-reduced-motion:no-preference){.menu a,.link-card,.category-card,.vps-gauge-card{transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease!important}}
    @media (max-width:760px){body{background:#eef3f8!important;color:#102033!important}.app{display:block!important;background:transparent!important}aside{background:rgba(255,255,255,.62)!important;border-color:rgba(255,255,255,.55)!important;backdrop-filter:blur(14px) saturate(1.12)!important}main{padding:12px 12px 42px!important}.hero{min-height:82px!important;margin:8px 0 14px!important;padding:12px 14px!important;background:rgba(255,255,255,.40)!important;border:1px solid rgba(255,255,255,.48)!important;box-shadow:0 12px 34px rgba(15,23,42,.08)!important}section,.card,.link-card,.category-panel,.category-card,.run-panel,.vps-gauge-card,.tool-card,.status-card,.quick-card{background:rgba(255,255,255,.58)!important;border-color:rgba(255,255,255,.62)!important;color:#122033!important;box-shadow:0 14px 34px rgba(15,23,42,.10)!important;backdrop-filter:blur(12px) saturate(1.12)!important}.hero h1,h1,h2,h3,.section-head b,.category-title b,.run-panel-head b,.vps-card-head b{color:#0f1d2d!important}.section-head span,p,small,.meta,.category-title span,.run-panel-head span,#chunyu-home .vps-gauge-card small{color:rgba(30,48,70,.72)!important}.menu a{color:#23364a!important}.menu a:hover,.menu a.active{color:#061321!important;background:rgba(103,232,249,.18)!important}.category-list,.links-grid,.card-grid,#directory .category-list{gap:10px!important}.page-photo-bg::after{background:linear-gradient(180deg,rgba(240,244,248,.68) 0%,rgba(240,244,248,.42) 42%,rgba(240,244,248,.12) 100%)!important}}

  

    /* 20260610 mobile popular-entry compact height */
    @media (max-width: 760px) {
      .quick-card,
      .top-card,
      .featured-card,
      .hot-card,
      .hero-card,
      #quick .link-card,
      #hot .link-card,
      #featured .link-card,
      #popular .link-card {
        min-height: 118px !important;
        height: auto !important;
        padding: 18px 22px !important;
        align-items: center !important;
      }
      .quick-card .card-body,
      .top-card .card-body,
      .featured-card .card-body,
      .hot-card .card-body,
      .hero-card .card-body,
      #quick .link-card .card-body,
      #hot .link-card .card-body,
      #featured .link-card .card-body,
      #popular .link-card .card-body {
        gap: 4px !important;
      }
    }

  

    /* 20260610 mobile align hot vps card heights */
    @media (max-width: 760px) {
      #hot .card-grid .card.compact,
      #hot .card-grid .card.compact > a,
      #chunyu-home .vps-gauge-card {
        min-height: 118px !important;
        height: 118px !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
      }
      #hot .card-grid .card.compact > a {
        width: 100% !important;
        gap: 10px !important;
      }
      #hot .card-grid .card.compact .thumb {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 12px !important;
        margin: 0 !important;
      }
      #hot .card-grid .card.compact .thumb img,
      #hot .card-grid .card.compact .thumb .tag,
      #hot .card-grid .card.compact .meta,
      #hot .card-grid .card.compact .feature-hover {
        display: none !important;
      }
      #hot .card-grid .card.compact .card-body {
        padding: 0 !important;
        margin: 0 !important;
        gap: 3px !important;
        min-width: 0 !important;
      }
      #hot .card-grid .card.compact .card-body h3 {
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
      }
      #hot .card-grid .card.compact .card-body p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
      }
      #chunyu-home .vps-gauge-card {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
      }
      #chunyu-home .vps-card-head {
        width: 100% !important;
        margin: 0 !important;
      }
      #chunyu-home .vps-mini-gauges {
        width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
      }
      #chunyu-home .mini-gauge-box { gap: 2px !important; }
      #chunyu-home .mini-gauge { width: 44px !important; height: 44px !important; }
      #chunyu-home .mini-gauge i { height: 17px !important; }
      #chunyu-home .mini-gauge-box em { font-size: 10px !important; }
      #chunyu-home .vps-gauge-card small { display: none !important; }
    }

  

    /* 20260610 mobile hot title only reorder */
    @media (max-width: 760px) {
      #hot .card-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      #hot .card-grid .card.compact:nth-child(1) { order: 1 !important; }
      #hot .card-grid .card.compact:nth-child(2) { order: 3 !important; }
      #hot .card-grid .card.compact:nth-child(3) { order: 2 !important; }
      #hot .card-grid .card.compact:nth-child(4) { order: 4 !important; }
      #hot .card-grid .card.compact,
      #hot .card-grid .card.compact > a {
        min-height: 96px !important;
        height: 96px !important;
      }
      #hot .card-grid .card.compact .card-body {
        justify-content: center !important;
      }
      #hot .card-grid .card.compact .card-body h3 {
        font-size: 21px !important;
        line-height: 1.15 !important;
        letter-spacing: .02em !important;
        writing-mode: horizontal-tb !important;
        max-width: none !important;
      }
      #hot .card-grid .card.compact .card-body p,
      #hot .card-grid .card.compact .meta,
      #hot .card-grid .card.compact .tag,
      #hot .card-grid .card.compact .feature-hover {
        display: none !important;
      }
    }

  

    /* 20260610 mobile vps reveal text */
    @media (max-width: 760px) {
      #chunyu-home .vps-gauge-card {
        min-height: 138px !important;
        height: 138px !important;
        padding: 12px 16px 10px !important;
        justify-content: flex-start !important;
        gap: 3px !important;
      }
      #chunyu-home .vps-card-head {
        flex: 0 0 auto !important;
        height: 22px !important;
        margin-bottom: 0 !important;
      }
      #chunyu-home .vps-mini-gauges {
        flex: 0 0 auto !important;
        transform: translateY(-3px) !important;
        margin-bottom: -4px !important;
      }
      #chunyu-home .mini-gauge { width: 38px !important; height: 38px !important; }
      #chunyu-home .mini-gauge i { height: 15px !important; }
      #chunyu-home .vps-gauge-card small {
        display: block !important;
        width: 100% !important;
        margin-top: -2px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        opacity: .82 !important;
      }
    }

  

    /* 20260610 mobile hot full width icons */
    @media (max-width: 760px) {
      body { margin: 0 !important; }
      .app, main, .main, .content, .content-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .content-section,
      #hot,
      #directory,
      #chunyu-home {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
      }
      #hot .card-grid,
      #directory .category-list,
      #chunyu-home .vps-gauge-console {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #hot .card-grid .card.compact .thumb {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-size: cover !important;
        background-position: center !important;
        background-image: var(--art) !important;
        opacity: 1 !important;
      }
      #hot .card-grid .card.compact .thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 1 !important;
      }
    }

  

    /* 20260610 mobile gold hollow site title */
    @media (max-width: 760px) {
      .brand h1,
      .site-title,
      header h1,
      .hero h1,
      .mobile-title {
        font-family: ui-serif, "Songti SC", "Noto Serif SC", "STSong", serif !important;
        font-weight: 900 !important;
        letter-spacing: .03em !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        -webkit-text-stroke: 1.15px rgba(255, 222, 142, .96) !important;
        text-shadow:
          0 1px 0 rgba(88, 55, 12, .55),
          0 0 10px rgba(255, 218, 128, .46),
          0 0 24px rgba(255, 196, 74, .28),
          0 8px 18px rgba(41, 22, 5, .22) !important;
        background: linear-gradient(115deg,#fff7c8 0%,#d79b2f 34%,#fff0a7 52%,#9b6518 76%,#ffe7a2 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        filter: drop-shadow(0 2px 2px rgba(35,20,5,.22)) !important;
      }
    }

  

    /* 20260610 mobile luxury hollow glass title */
    @media (max-width: 760px) {
      .brand h1,
      .brand-title,
      .site-title,
      header h1,
      .hero h1,
      .mobile-title {
        position: relative !important;
        display: inline-block !important;
        padding: 7px 12px 9px !important;
        border-radius: 18px !important;
        font-family: ui-serif, "Songti SC", "Noto Serif SC", "STSong", serif !important;
        font-size: clamp(30px, 8.6vw, 43px) !important;
        line-height: 1.04 !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        color: transparent !important;
        -webkit-text-fill-color: rgba(255,255,255,.10) !important;
        -webkit-text-stroke: 1.25px rgba(245, 196, 88, .98) !important;
        background:
          linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 46%, rgba(255,214,126,.16)),
          linear-gradient(112deg,#fff6c6 0%,#d59a2b 28%,#fff1a8 48%,#a96d18 72%,#ffe8a6 100%) !important;
        -webkit-background-clip: padding-box, text !important;
        background-clip: padding-box, text !important;
        border: 1px solid rgba(255, 226, 156, .48) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.62),
          inset 0 -18px 34px rgba(255,255,255,.08),
          0 0 0 1px rgba(130,84,20,.12),
          0 10px 28px rgba(77,43,9,.18),
          0 0 26px rgba(255,205,95,.30) !important;
        backdrop-filter: blur(13px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(13px) saturate(150%) !important;
        text-shadow:
          0 0 1px rgba(255,255,255,.55),
          0 1px 0 rgba(88,55,12,.55),
          0 0 12px rgba(255,219,132,.48),
          0 0 28px rgba(214,149,39,.26) !important;
      }
      .brand h1::before,
      .brand-title::before,
      .site-title::before,
      header h1::before,
      .hero h1::before,
      .mobile-title::before {
        content: "" !important;
        position: absolute !important;
        inset: 1px !important;
        border-radius: inherit !important;
        background: linear-gradient(125deg, rgba(255,255,255,.46), transparent 34%, rgba(255,224,151,.18) 60%, transparent 82%) !important;
        pointer-events: none !important;
        mix-blend-mode: screen !important;
      }
    }

  

    /* 20260610 real hollow transparent floating title */
    @media (max-width: 860px) {
      .mobile-floating-title,
      .mobile-site-title {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        -webkit-text-stroke: 1.15px rgba(226, 166, 54, .98) !important;
        font-family: ui-serif, "Songti SC", "Noto Serif SC", "STSong", serif !important;
        font-weight: 950 !important;
        letter-spacing: .03em !important;
        text-shadow:
          0 0 1px rgba(92, 52, 6, .55),
          0 0 8px rgba(255, 205, 91, .38),
          0 2px 8px rgba(0, 0, 0, .16) !important;
        filter: none !important;
        mix-blend-mode: multiply !important;
      }
      .mobile-floating-title::before,
      .mobile-floating-title::after,
      .mobile-site-title::before,
      .mobile-site-title::after {
        display: none !important;
        content: none !important;
        background: none !important;
      }
    }

  .icon-thumb{display:grid;place-items:center;background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(245,214,128,.12))!important}.icon-thumb img{display:none!important}.entry-icon{font-size:42px;filter:drop-shadow(0 8px 18px rgba(56,189,248,.32))}

/* Desktop polish 20260611: wider, clearer, unified glass cards */
@media (min-width: 901px) {
  body {
    background:
      radial-gradient(circle at 72% 12%, rgba(94, 165, 255, .22), transparent 32%),
      radial-gradient(circle at 84% 74%, rgba(167, 139, 250, .18), transparent 34%),
      linear-gradient(135deg, #eef5ff 0%, #f7f9ff 42%, #edf2fb 100%) !important;
  }
  .layout, .app, main, .main, .content, .shell { max-width: 1440px !important; }
  main, .main, .content { width: min(1040px, calc(100vw - 320px)) !important; }
  aside, .sidebar {
    background: linear-gradient(180deg, rgba(14, 25, 45, .86), rgba(12, 19, 34, .78)) !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 22px 0 60px rgba(34, 66, 120, .14) !important;
  }
  .menu a, .nav-link, aside a { border-radius: 16px !important; transition: .18s ease !important; }
  .menu a:hover, .menu a.active, .nav-link:hover, .nav-link.active {
    background: rgba(255,255,255,.14) !important; color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  }
  .topbar, .toolbar, .status-pills, .meta-row { gap: 10px !important; }
  .topbar span, .toolbar span, .chip, .pill, .status-pill {
    background: rgba(255,255,255,.58) !important;
    border: 1px solid rgba(90, 120, 170, .18) !important;
    box-shadow: 0 8px 26px rgba(65, 93, 135, .08) !important;
    color: #27384f !important;
  }
  .hero {
    min-height: 360px !important; border-radius: 32px !important; overflow: hidden !important;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(237,246,255,.64)) !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    box-shadow: 0 30px 90px rgba(57, 83, 132, .18) !important;
  }
  .hero-photo-reel {
    width: 43% !important; max-width: 430px !important; border-radius: 26px !important;
    box-shadow: 0 24px 70px rgba(24, 39, 70, .22) !important;
  }
  .hero-top, .hero-quote, .hero-title { max-width: 52% !important; margin-left: auto !important; }
  .hero-quote {
    background: rgba(255,255,255,.34) !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    backdrop-filter: blur(8px) !important;
    color: #20304a !important; text-shadow: none !important;
  }
  .hero-quote .quote-main { font-size: clamp(24px, 2.3vw, 34px) !important; line-height: 1.35 !important; font-weight: 850 !important; }
  .hero-quote .quote-source { color: #64748b !important; font-weight: 650 !important; }
  .hero-tabs { left: 48% !important; right: 28px !important; bottom: 28px !important; justify-content: flex-start !important; }
  .hero-tabs button {
    background: rgba(255,255,255,.72) !important; color: #21324c !important;
    border: 1px solid rgba(80, 111, 160, .16) !important;
  }
  .section, section, .panel, .card, .category-card, .hot-card, .vps-gauge-card { border-radius: 24px !important; }
  #hot .grid, #hot .cards, .hot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
  #hot .card, #hot .hot-card, .hot-card, .quick-card {
    min-height: 132px !important; padding: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(238,247,255,.62)) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 18px 50px rgba(48, 77, 122, .12) !important;
    color: #17253d !important;
  }
  #hot .card:hover, #hot .hot-card:hover, .hot-card:hover, .quick-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 24px 70px rgba(57, 96, 160, .18), 0 0 0 1px rgba(96,165,250,.22) inset !important;
  }
  #hot img, #hot .icon, .hot-card img, .quick-card img { width: 42px !important; height: 42px !important; }
  #hot h3, #hot b, .hot-card h3, .quick-card h3 { font-size: 17px !important; font-weight: 850 !important; color: #14233a !important; }
  #hot p, #hot small, .hot-card p, .quick-card p { display: block !important; color: #64748b !important; font-size: 12px !important; line-height: 1.55 !important; }
  #directory .category-card, .category-card {
    background: linear-gradient(145deg, rgba(17, 30, 52, .88), rgba(28, 46, 76, .78)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 18px 56px rgba(19, 32, 55, .18) !important;
  }
  #directory .category-title b, .category-title b { color: #f8fbff !important; font-weight: 900 !important; }
  #directory .category-title span, .category-title span, #directory small { color: rgba(226,235,248,.78) !important; }
  #directory .category-card:hover, .category-card:hover { box-shadow: 0 24px 72px rgba(37, 99, 235, .20) !important; }
  #chunyu-home .vps-gauge-card, #status .vps-gauge-card, .vps-gauge-card {
    background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(238,246,255,.58)) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 18px 58px rgba(46, 73, 116, .13) !important;
  }
  .vps-gauge-card small, .vps-gauge-card .ip-line { color: #64748b !important; font-size: 12px !important; }
  .mini-gauge, .gauge, .vps-mini-gauge { filter: drop-shadow(0 8px 18px rgba(48, 78, 120, .10)) !important; }
  h2, .section-title, .block-title { color: #12223a !important; letter-spacing: -.02em !important; }
}


/* Desktop polish fix 20260611: hero quote and actual grids */
@media (min-width: 901px) {
  .container, .page-main, .main-panel, .content-wrap { max-width: 1100px !important; }
  .hero-top {
    position: absolute !important;
    left: auto !important;
    right: 46px !important;
    top: 72px !important;
    bottom: auto !important;
    width: 42% !important;
    max-width: 470px !important;
    min-width: 360px !important;
  }
  .hero-quote {
    width: 100% !important;
    max-width: none !important;
    padding: 22px 24px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .hero-quote .quote-main,
  .hero-quote .quote-source {
    display: block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
  }
  .hero-quote .quote-main { font-size: 25px !important; }
  .hero-tabs { left: 50% !important; right: 46px !important; }
  #hot .card-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 18px !important; }
  #hot .feature-card { min-height: 180px !important; }
  #directory .category-grid, #directory .card-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 12px !important; }
}


/* Desktop polish center fix 20260611: stop left-heavy empty right side */
@media (min-width: 901px) {
  .app { grid-template-columns: 276px minmax(0, 1fr) !important; }
  main, .main, .content {
    width: min(1180px, calc(100vw - 360px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .main { padding-left: 0 !important; padding-right: 0 !important; }
  .topbar { width: 100% !important; }
  .hero, .content-section { width: 100% !important; }
  #hot .card-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  #directory .category-list, #directory .category-grid, #directory .card-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  #chunyu-home .vps-gauge-console, #status .vps-gauge-console {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}


/* Desktop fresh-tech refinement 20260611: cleaner light glass, less black blocks */
@media (min-width: 901px) {
  body {
    background:
      radial-gradient(circle at 18% 8%, rgba(59,130,246,.18), transparent 32%),
      radial-gradient(circle at 86% 18%, rgba(45,212,191,.14), transparent 30%),
      linear-gradient(180deg, #eef6fb 0%, #f8fbff 48%, #eef5fb 100%) !important;
  }
  .app { background: transparent !important; grid-template-columns: 276px minmax(0,1fr) !important; }
  main, .main, .content {
    width: min(1120px, calc(100vw - 380px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding-bottom: 72px !important;
  }
  aside {
    background: rgba(248,252,255,.62) !important;
    border-right: 1px solid rgba(148,163,184,.26) !important;
    box-shadow: 8px 0 38px rgba(15,23,42,.06) !important;
  }
  .topbar {
    background: rgba(255,255,255,.44) !important;
    border: 1px solid rgba(148, 190, 220, .28) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    margin: 18px 0 18px !important;
    box-shadow: 0 12px 36px rgba(30, 64, 120, .07) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
  }
  .hero {
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(232,246,255,.32)) !important;
    border: 1px solid rgba(125, 190, 230, .34) !important;
    box-shadow: 0 24px 70px rgba(31, 87, 130, .12), inset 0 1px 0 rgba(255,255,255,.82) !important;
  }
  .hero-quote {
    background: rgba(255,255,255,.42) !important;
    border: 1px solid rgba(148,190,220,.24) !important;
    border-radius: 22px !important;
    padding: 18px 20px !important;
    box-shadow: 0 16px 46px rgba(30,64,120,.08) !important;
  }
  .content-section,
  #hot,
  #directory,
  #chunyu-home {
    background: rgba(255,255,255,.34) !important;
    border: 1px solid rgba(148,190,220,.24) !important;
    border-radius: 26px !important;
    padding: 20px !important;
    box-shadow: 0 20px 58px rgba(30,64,120,.08), inset 0 1px 0 rgba(255,255,255,.62) !important;
    backdrop-filter: blur(20px) saturate(1.18) !important;
  }
  .content-section::before { opacity: .35 !important; }
  .section-head { margin-bottom: 16px !important; }
  .section-head h2, .section-head b {
    color: #10243d !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
  }
  .section-head h2::before {
    width: 4px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(180deg,#38bdf8,#2dd4bf) !important;
    box-shadow: 0 0 18px rgba(56,189,248,.42) !important;
  }
  .section-head span { color: rgba(51,65,85,.66) !important; }
  #hot .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; }
  #hot .card,
  #hot .feature-card,
  #hot .link-card,
  #hot .card.compact,
  .quick-card {
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(235,248,255,.56)) !important;
    border: 1px solid rgba(125,190,230,.30) !important;
    border-radius: 20px !important;
    color: #10243d !important;
    box-shadow: 0 16px 44px rgba(30,64,120,.09), inset 0 1px 0 rgba(255,255,255,.78) !important;
  }
  #hot .card:hover,
  #hot .feature-card:hover,
  #hot .link-card:hover,
  .quick-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(56,189,248,.52) !important;
    box-shadow: 0 24px 64px rgba(37,99,235,.14), 0 0 0 1px rgba(45,212,191,.12) !important;
  }
  #hot h3, #hot b, #hot .card-body h3 { color: #10243d !important; font-weight: 900 !important; }
  #hot p, #hot small, #hot .meta { color: rgba(51,65,85,.68) !important; }
  #directory .category-list,
  #directory .category-grid,
  #directory .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 13px !important; }
  #directory .category-panel,
  #directory .category-card,
  #directory .category-summary {
    background: linear-gradient(145deg, rgba(20,42,70,.72), rgba(13,31,52,.58)) !important;
    border: 1px solid rgba(125,211,252,.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #directory .category-title b { color: #f8fbff !important; }
  #directory .category-title span, #directory small { color: rgba(226,235,248,.74) !important; }
  #chunyu-home .vps-gauge-console,
  #status .vps-gauge-console { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px !important; }
  #chunyu-home .vps-gauge-card,
  #status .vps-gauge-card {
    background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(235,248,255,.48)) !important;
    border: 1px solid rgba(125,190,230,.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 44px rgba(30,64,120,.09) !important;
  }
}


/* Desktop fresh-tech refinement 2 20260611: sidebar/player/hero polish */
@media (min-width: 901px) {
  aside {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(237,248,255,.46)) !important;
    color: #18304a !important;
  }
  .logo b, .menu-title { color: #10243d !important; }
  .logo span, .menu small, .sidebar-foot span { color: rgba(51,65,85,.70) !important; }
  .menu a {
    color: rgba(24,48,74,.84) !important;
    border: 1px solid transparent !important;
  }
  .menu a:hover, .menu a.active {
    color: #062033 !important;
    background: rgba(224,247,255,.70) !important;
    border-color: rgba(56,189,248,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 10px 28px rgba(30,64,120,.07) !important;
  }
  .sidebar-foot,
  .music-player,
  .player-card,
  [class*="music"],
  [id*="music"] {
    background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(230,246,255,.34)) !important;
    border: 1px solid rgba(125,190,230,.24) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(30,64,120,.08), inset 0 1px 0 rgba(255,255,255,.62) !important;
    color: #10243d !important;
  }
  .music-player button,
  .player-card button,
  [class*="music"] button,
  [id*="music"] button {
    background: rgba(255,255,255,.54) !important;
    border: 1px solid rgba(56,189,248,.22) !important;
    color: #0f3558 !important;
    box-shadow: none !important;
  }
  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.26) 54%, rgba(235,248,255,.42)) !important;
    z-index: 1 !important;
  }
  .hero > * { position: relative !important; z-index: 2 !important; }
  .hero-photo-reel, .hero-reel, .hero-bg, .hero-bg-slide {
    filter: saturate(.92) contrast(.96) brightness(1.03) !important;
  }
  .hero-quote {
    background: rgba(255,255,255,.50) !important;
    border-color: rgba(125,190,230,.30) !important;
  }
  .hero-quote .quote-main {
    color: #10243d !important;
    letter-spacing: -.035em !important;
  }
  .hero-quote .quote-source { color: rgba(51,65,85,.68) !important; }
  .content-section, #hot, #directory, #chunyu-home {
    padding: 18px !important;
    border-radius: 24px !important;
  }
  #hot .card, #hot .feature-card, #hot .link-card, #hot .card.compact, .quick-card,
  #chunyu-home .vps-gauge-card, #status .vps-gauge-card {
    min-height: 128px !important;
  }
  #directory .category-panel, #directory .category-card, #directory .category-summary {
    background: linear-gradient(145deg, rgba(24,53,86,.66), rgba(15,37,62,.52)) !important;
  }
}


/* Desktop fresh-tech refinement 3 20260611: hero natural, compact hot, lighter directory */
@media (min-width: 901px) {
  main, .main, .content { width: min(1100px, calc(100vw - 390px)) !important; }
  .topbar { margin-bottom: 14px !important; padding: 7px 16px !important; opacity: .92 !important; }
  .hero {
    min-height: 250px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.13) 45%, rgba(235,248,255,.32)) !important;
  }
  .hero-photo-reel, .hero-reel, .hero-bg, .hero-bg-slide, .hero-reel-slide {
    transform: scale(1.035) !important;
    filter: saturate(.96) contrast(.98) brightness(1.04) !important;
  }
  .hero-top, .hero-quote, .hero-title { max-width: 46% !important; }
  .hero-quote {
    max-width: 430px !important;
    margin-left: auto !important;
    padding: 14px 17px !important;
    border-radius: 18px !important;
  }
  .hero-quote::before {
    content: "CHUNYU HOME" !important;
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
    color: rgba(14,116,144,.72) !important;
    font-weight: 900 !important;
  }
  .hero-quote .quote-main { font-size: clamp(21px, 1.8vw, 28px) !important; line-height: 1.32 !important; }
  .hero-tabs { bottom: 18px !important; }
  .content-section, #hot, #directory, #chunyu-home {
    padding: 16px !important;
    margin-top: 16px !important;
  }
  .section-head { margin-bottom: 12px !important; }
  #hot .card-grid { gap: 13px !important; }
  #hot .card, #hot .feature-card, #hot .link-card, #hot .card.compact, .quick-card {
    min-height: 104px !important;
    border-radius: 18px !important;
  }
  #hot .card a, #hot .feature-card > a, #hot .card.compact > a {
    padding: 14px !important;
  }
  #hot img, #hot .icon, #hot .thumb, .quick-card img {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 0 12px rgba(56,189,248,.28)) !important;
  }
  #hot h3, #hot b, #hot .card-body h3 { font-size: 17px !important; }
  #hot p, #hot small, #hot .meta { font-size: 12px !important; line-height: 1.45 !important; }
  #directory .category-panel,
  #directory .category-card,
  #directory .category-summary {
    background: linear-gradient(145deg, rgba(42,84,124,.58), rgba(29,63,96,.44)) !important;
    border-color: rgba(147,197,253,.24) !important;
    box-shadow: 0 14px 38px rgba(30,64,120,.10), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #directory .category-title b { color: #f8fbff !important; }
  #directory .category-title span, #directory small { color: rgba(235,245,255,.78) !important; }
  aside img, .sidebar img, .cover img {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    filter: saturate(.94) brightness(1.04) !important;
  }
}


/* Desktop fresh-tech refinement 4 20260611: reduce hero blur, lighter status */
@media (min-width: 901px) {
  .hero {
    min-height: 242px !important;
    border-radius: 26px !important;
  }
  .hero::after {
    background: linear-gradient(90deg, rgba(255,255,255,.015), rgba(255,255,255,.07) 42%, rgba(235,248,255,.24) 100%) !important;
  }
  .hero-photo-reel, .hero-reel, .hero-bg, .hero-bg-slide, .hero-reel-slide {
    transform: scale(1.055) !important;
    filter: saturate(.98) contrast(.99) brightness(1.035) !important;
  }
  .hero-quote {
    max-width: 398px !important;
    padding: 13px 16px !important;
    background: rgba(255,255,255,.44) !important;
    box-shadow: 0 12px 34px rgba(30,64,120,.07) !important;
  }
  .hero-quote .quote-main { font-size: clamp(20px, 1.65vw, 26px) !important; }
  .hero-tabs button {
    width: 28px !important;
    height: 4px !important;
    opacity: .68 !important;
  }
  .topbar {
    min-height: 34px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.34) !important;
    box-shadow: 0 8px 24px rgba(30,64,120,.055) !important;
  }
  .topbar .pill, .topbar span, .topbar b {
    transform: scale(.96) !important;
    transform-origin: center !important;
  }
  .content-section, #hot, #directory, #chunyu-home { margin-top: 14px !important; }
  #hot .card-grid { gap: 12px !important; }
  #directory .category-list, #directory .category-grid, #directory .card-grid { gap: 12px !important; }
}


/* Desktop fresh-tech hero overlap fix 20260611: quote above carousel dots */
@media (min-width: 901px) {
  .hero-top {
    right: 44px !important;
    bottom: 58px !important;
    width: min(40%, 430px) !important;
    max-width: 430px !important;
  }
  .hero-quote {
    max-width: 390px !important;
    padding: 12px 15px !important;
    margin-left: auto !important;
  }
  .hero-quote .quote-main {
    font-size: clamp(19px, 1.55vw, 24px) !important;
    line-height: 1.30 !important;
  }
  .hero-quote .quote-source {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .hero-tabs {
    left: 50% !important;
    right: 46px !important;
    bottom: 18px !important;
    z-index: 5 !important;
    justify-content: flex-end !important;
  }
  .hero-tabs button {
    width: 24px !important;
    min-width: 24px !important;
    height: 4px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 999px !important;
  }
}


/* Hot cards visual elements 20260611: richer but clean tech backgrounds */
@media (min-width: 901px) {
  #hot .card,
  #hot .feature-card,
  #hot .link-card,
  #hot .card.compact {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 16% 18%, rgba(56,189,248,.18), transparent 28%),
      radial-gradient(circle at 86% 82%, rgba(45,212,191,.12), transparent 30%),
      linear-gradient(145deg, rgba(255,255,255,.82), rgba(232,246,255,.58)) !important;
  }
  #hot .card::before,
  #hot .feature-card::before,
  #hot .link-card::before,
  #hot .card.compact::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(135deg, rgba(56,189,248,.18) 0 1px, transparent 1px 100%),
      linear-gradient(90deg, rgba(14,116,144,.08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(14,116,144,.06) 1px, transparent 1px) !important;
    background-size: 100% 100%, 22px 22px, 22px 22px !important;
    opacity: .34 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.85), transparent 72%) !important;
  }
  #hot .card::after,
  #hot .feature-card::after,
  #hot .link-card::after,
  #hot .card.compact::after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    top: -34px !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56,189,248,.24) !important;
    box-shadow: inset 0 0 0 18px rgba(56,189,248,.045), 0 0 36px rgba(45,212,191,.13) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  #hot .card > *,
  #hot .feature-card > *,
  #hot .link-card > *,
  #hot .card.compact > * {
    position: relative !important;
    z-index: 1 !important;
  }
  #hot .card:nth-child(1), #hot .feature-card:nth-child(1) {
    background:
      radial-gradient(circle at 20% 20%, rgba(168,85,247,.22), transparent 30%),
      radial-gradient(circle at 84% 80%, rgba(56,189,248,.12), transparent 32%),
      linear-gradient(145deg, rgba(255,255,255,.80), rgba(236,245,255,.58)) !important;
  }
  #hot .card:nth-child(2), #hot .feature-card:nth-child(2) {
    background:
      radial-gradient(circle at 20% 20%, rgba(56,189,248,.20), transparent 30%),
      radial-gradient(circle at 84% 80%, rgba(37,99,235,.10), transparent 32%),
      linear-gradient(145deg, rgba(255,255,255,.82), rgba(232,247,255,.58)) !important;
  }
  #hot .card:nth-child(3), #hot .feature-card:nth-child(3) {
    background:
      radial-gradient(circle at 20% 20%, rgba(251,191,36,.16), transparent 30%),
      radial-gradient(circle at 84% 80%, rgba(56,189,248,.13), transparent 32%),
      linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,248,255,.58)) !important;
  }
  #hot .thumb,
  #hot img,
  #hot .icon {
    box-shadow: 0 12px 28px rgba(30,64,120,.14), 0 0 22px rgba(56,189,248,.18) !important;
  }
}


/* Quote right-side fix 20260611: keep quote outside carousel visual area */
@media (min-width: 901px) {
  .hero {
    min-height: 360px !important;
    padding-right: 34px !important;
  }
  .hero-photo-reel {
    left: 28px !important;
    right: auto !important;
    width: 55% !important;
    max-width: 680px !important;
    height: calc(100% - 56px) !important;
    top: 28px !important;
    bottom: 28px !important;
  }
  .hero-top {
    position: absolute !important;
    left: auto !important;
    right: 34px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: min(38%, 460px) !important;
    max-width: 460px !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }
  .hero-quote {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 18px 22px !important;
    border-radius: 24px !important;
    background: rgba(245,248,255,.76) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 18px 44px rgba(30,64,120,.12), inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  }
  .hero-quote .quote-main {
    font-size: clamp(20px, 1.75vw, 27px) !important;
    line-height: 1.34 !important;
  }
  .hero-quote .quote-source {
    margin-top: 10px !important;
    font-size: 13px !important;
  }
  .hero-tabs {
    left: 32px !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(52%, 620px) !important;
  }
}


/* Quote hard separate 20260611: no photo/slide under quote */
@media (min-width: 901px) {
  .hero {
    position: relative !important;
    min-height: 365px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(240,248,255,.70), rgba(255,255,255,.50)) !important;
  }
  .hero-bg-slides,
  .hero-network {
    display: none !important;
  }
  .hero-photo-reel {
    position: absolute !important;
    left: 26px !important;
    top: 26px !important;
    bottom: 26px !important;
    right: auto !important;
    width: calc(50% - 38px) !important;
    max-width: calc(50% - 38px) !important;
    height: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }
  .hero-top {
    position: absolute !important;
    left: 54% !important;
    right: 30px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }
  .hero-quote {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 26px !important;
    border-radius: 28px !important;
    background: rgba(246,249,255,.88) !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    box-shadow: 0 18px 42px rgba(30,64,120,.13), inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter: blur(12px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
  }
  .hero-quote::before,
  .hero-quote::after {
    display: none !important;
  }
  .hero-tabs {
    left: 30px !important;
    right: auto !important;
    bottom: 18px !important;
    width: calc(50% - 46px) !important;
    max-width: calc(50% - 46px) !important;
    z-index: 7 !important;
  }
}


/* Quote hard separate v2 20260611: keep left carousel visible */
@media (min-width: 901px) {
  .hero-photo-reel,
  .hero-photo-reel .hero-reel-slide,
  .hero-photo-reel .hero-reel-slide.active,
  .hero-photo-reel img {
    display: block !important;
    visibility: visible !important;
  }
  .hero-photo-reel {
    opacity: 1 !important;
    z-index: 5 !important;
    background: rgba(255,255,255,.42) !important;
  }
  .hero-photo-reel .hero-reel-slide {
    position: absolute !important;
    inset: 0 !important;
  }
  .hero-photo-reel .hero-reel-slide.active { opacity: 1 !important; }
  .hero-photo-reel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/* Quote plain on right image area 20260611 */
@media (min-width: 901px) {
  .hero-bg-slides,
  .hero-network {
    display: block !important;
  }
  .hero-photo-reel {
    left: 26px !important;
    top: 26px !important;
    bottom: 26px !important;
    right: auto !important;
    width: 31% !important;
    max-width: 360px !important;
    z-index: 4 !important;
  }
  .hero-top {
    position: absolute !important;
    left: 46% !important;
    right: 44px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }
  .hero-quote {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-quote::before,
  .hero-quote::after {
    display: none !important;
  }
  .hero-quote .quote-main {
    display: block !important;
    color: #14233a !important;
    font-size: clamp(25px, 2.35vw, 36px) !important;
    line-height: 1.34 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 2px 12px rgba(255,255,255,.62) !important;
  }
  .hero-quote .quote-source {
    display: block !important;
    margin-top: 18px !important;
    color: rgba(20,35,58,.66) !important;
    font-size: clamp(15px, 1.18vw, 18px) !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(255,255,255,.55) !important;
  }
}


/* Hero 2:1 carousel/quote final 20260611 */
@media (min-width: 901px) {
  .hero {
    position: relative !important;
    min-height: 390px !important;
    padding: 26px !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(238,248,255,.78), rgba(255,255,255,.55)) !important;
  }
  .hero-bg-slides,
  .hero-network { display: none !important; }
  .hero-photo-reel {
    position: relative !important;
    grid-column: 1 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 338px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    z-index: 4 !important;
    display: block !important;
    opacity: 1 !important;
    background: rgba(210,226,240,.55) !important;
  }
  .hero-photo-reel .hero-reel-slide,
  .hero-photo-reel .hero-reel-slide.active {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
  }
  .hero-photo-reel .hero-reel-slide { opacity: 0 !important; }
  .hero-photo-reel .hero-reel-slide.active { opacity: 1 !important; }
  .hero-photo-reel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .hero-top {
    position: relative !important;
    grid-column: 2 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 338px !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  .hero-title { display: none !important; }
  .hero-quote {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-quote::before,
  .hero-quote::after { display: none !important; }
  .hero-quote .quote-main {
    display: block !important;
    color: #14233a !important;
    font-size: clamp(25px, 2.4vw, 38px) !important;
    line-height: 1.33 !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 2px 12px rgba(255,255,255,.56) !important;
  }
  .hero-quote .quote-source {
    display: block !important;
    margin-top: 22px !important;
    color: rgba(20,35,58,.62) !important;
    font-size: clamp(14px, 1.1vw, 17px) !important;
    font-weight: 850 !important;
    text-align: center !important;
  }
  .hero-tabs {
    position: absolute !important;
    left: 46px !important;
    right: auto !important;
    bottom: 42px !important;
    width: calc((100% - 80px) * .666 - 20px) !important;
    max-width: none !important;
    z-index: 8 !important;
  }
}


/* Hero carousel visible fix 20260611 */
@media (min-width:901px){
  .hero-photo-reel{
    mask-image:none!important;
    -webkit-mask-image:none!important;
    background:transparent!important;
  }
  .hero-photo-reel::after{display:none!important;content:none!important;}
  .hero-photo-reel .hero-reel-slide{transform:none!important;filter:none!important;}
  .hero-photo-reel .hero-reel-slide.active{opacity:1!important;transform:none!important;}
  .hero-photo-reel .hero-reel-slide:not(.active){opacity:0!important;}
  .hero-photo-reel img{filter:none!important;object-fit:cover!important;object-position:center!important;}
}


/* Hero real photo source 20260611 */
@media (min-width:901px){
  .hero-photo-reel img{
    object-fit:cover!important;
    object-position:center 38%!important;
  }
}


/* Hero restore yesterday wide carousel 20260611 */
@media (min-width:901px){
  .hero{
    min-height:390px!important;
    padding:26px!important;
    display:grid!important;
    grid-template-columns:minmax(0,2fr) minmax(260px,1fr)!important;
    gap:30px!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .hero-photo-reel{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;max-width:none!important;height:310px!important;
    border-radius:28px!important;opacity:1!important;z-index:5!important;
    mask-image:none!important;-webkit-mask-image:none!important;
    overflow:hidden!important;background:transparent!important;
    grid-column:1!important;grid-row:1!important;
  }
  .hero-photo-reel::after{display:none!important;content:none!important;}
  .hero-top{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;width:100%!important;max-width:none!important;
    grid-column:2!important;grid-row:1!important;z-index:6!important;
  }
  .hero-quote{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;margin:0!important;}
  .hero-quote::before,.hero-quote::after{display:none!important;content:none!important;}
  .hero-photo-reel .hero-reel-slide{position:absolute!important;inset:0!important;transform:none!important;filter:none!important;}
  .hero-photo-reel .hero-reel-slide.active{opacity:1!important;transform:none!important;}
  .hero-photo-reel .hero-reel-slide:not(.active){opacity:0!important;}
  .hero-photo-reel img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important;display:block!important;}
  .hero-tabs{position:absolute!important;left:40px!important;right:auto!important;bottom:22px!important;width:calc((100% - 82px) * .66)!important;z-index:8!important;justify-content:center!important;}
}


/* Quote clean-tech copy/style 20260611 */
@media (min-width:901px){
  .hero-quote{
    position:relative!important;
    padding:22px 18px 20px!important;
  }
  .hero-quote::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;top:22px!important;bottom:24px!important;
    width:3px!important;border-radius:999px!important;
    background:linear-gradient(180deg,#38bdf8,#22d3ee,#60a5fa)!important;
    box-shadow:0 0 18px rgba(56,189,248,.38)!important;
  }
  .hero-quote .quote-main{
    padding-left:22px!important;
    color:#10243d!important;
    font-size:clamp(22px,2.05vw,32px)!important;
    line-height:1.42!important;
    font-weight:820!important;
    letter-spacing:-.025em!important;
    text-shadow:0 1px 10px rgba(255,255,255,.58)!important;
  }
  .hero-quote .quote-source{
    padding-left:22px!important;
    margin-top:16px!important;
    color:rgba(15,45,75,.56)!important;
    font-size:clamp(12px,.92vw,14px)!important;
    font-weight:650!important;
    letter-spacing:.02em!important;
    text-align:left!important;
  }
}
@media (max-width:900px){
  .hero-quote .quote-main{font-weight:800!important;line-height:1.48!important;letter-spacing:-.02em!important;}
}



/* 20260611 fix: directory hover text readability */
#directory .category-panel:hover,
#directory .category-panel:hover .category-summary,
#directory .category-panel:hover .category-summary *,
#directory .category-panel:hover h3,
#directory .category-panel:hover p,
#directory .category-panel:hover .category-count {
  color: #123044 !important;
  text-shadow: none !important;
}
#directory .category-panel:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(224,240,252,.66)) !important;
}
#directory .category-panel:hover::before {
  opacity: .18 !important;
}
#directory .category-panel:hover .category-count {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(96,165,250,.35) !important;
}



/* 20260611 desktop right ambience panel trial */
@media (min-width: 1180px) {
  .app {
    grid-template-columns: 260px minmax(0, 1120px) 260px !important;
    max-width: 1660px !important;
    margin: 0 auto !important;
    gap: 22px !important;
  }
  .main { width: 100% !important; max-width: none !important; }
  .desktop-ambient-panel {
    display: flex !important;
    position: sticky;
    top: 28px;
    align-self: start;
    min-height: calc(100vh - 56px);
    padding: 28px 0 32px;
    pointer-events: none;
  }
  .ambient-card {
    width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.42);
    background:
      radial-gradient(circle at 30% 10%, rgba(125,211,252,.22), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.13));
    box-shadow: 0 24px 70px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.52);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    padding: 22px 18px;
    color: rgba(16,38,58,.86);
  }
  .ambient-kicker { font-size: 12px; font-weight: 850; letter-spacing: .18em; color: rgba(14,116,144,.72); text-transform: uppercase; }
  .ambient-time { margin-top: 14px; font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: rgba(8,32,52,.90); }
  .ambient-date { margin-top: 8px; font-size: 13px; font-weight: 700; color: rgba(48,70,92,.66); }
  .ambient-line { height: 1px; margin: 18px 0; background: linear-gradient(90deg, rgba(14,165,233,.35), transparent); }
  .ambient-quote { font-size: 16px; line-height: 1.72; font-weight: 760; color: rgba(17,42,63,.82); }
  .ambient-meta { margin-top: 18px; display: grid; gap: 10px; }

  .weather-main{display:flex;align-items:center;gap:14px;margin-top:14px}
  .weather-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(186,230,253,.24));border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 30px rgba(14,165,233,.13)}

  .ambient-pill { border-radius: 14px; padding: 11px 12px; background: rgba(255,255,255,.30); border: 1px solid rgba(255,255,255,.42); font-size: 13px; font-weight: 760; color: rgba(32,58,82,.76); }
}
@media (max-width: 1179px) { .desktop-ambient-panel { display:none !important; } }


  .weather-select-wrap{display:block;margin-top:6px;pointer-events:auto}.weather-select-wrap select{width:142px;max-width:100%;border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(255,255,255,.55);color:rgba(8,32,52,.88);font-size:13px;font-weight:800;padding:7px 10px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}

  .weather-search-wrap{display:flex;gap:6px;margin-top:6px;pointer-events:auto}.weather-search-wrap input{min-width:0;width:112px;border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(255,255,255,.55);color:rgba(8,32,52,.88);font-size:13px;font-weight:800;padding:7px 9px;outline:none}.weather-search-wrap button{border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(14,165,233,.18);color:rgba(8,32,52,.88);font-size:13px;font-weight:900;padding:7px 9px;cursor:pointer}

  .market-panel{margin-top:2px;display:grid;gap:13px;pointer-events:auto}.market-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:950;color:rgba(8,32,52,.9)}.market-head small{font-size:11px;color:rgba(48,70,92,.55);font-weight:800}.market-section{display:grid;gap:8px}.market-title{font-size:12px;font-weight:950;letter-spacing:.08em;color:rgba(14,116,144,.72)}.market-grid{display:grid;gap:7px}.market-grid.two{grid-template-columns:1fr 1fr}.market-item{min-width:0;border-radius:13px;padding:8px 9px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:space-between;gap:8px}.market-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900;color:rgba(16,38,58,.82)}.market-val{font-size:11px;font-weight:900;color:rgba(48,70,92,.62)}.market-chg{font-size:11px;font-weight:950;border-radius:999px;padding:3px 6px;background:rgba(148,163,184,.18);color:rgba(71,85,105,.9)}.market-chg.up{background:rgba(239,68,68,.13);color:rgb(185,28,28)}.market-chg.down{background:rgba(34,197,94,.13);color:rgb(21,128,61)}


/* 20260611 market readability fix */
@media (min-width:1180px){
  .ambient-card{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(238,248,255,.50))!important;color:#0f2f45!important}
  .market-head{color:#082f49!important}.market-title{color:#0369a1!important;font-size:13px!important}
  .market-item{background:rgba(255,255,255,.72)!important;border-color:rgba(148,163,184,.38)!important;box-shadow:0 8px 20px rgba(15,23,42,.06)!important;padding:9px 10px!important}
  .market-name{color:#082f49!important;font-size:13px!important;text-decoration:none!important}.market-val{color:#334155!important;font-size:12px!important;text-decoration:none!important}
  .market-chg{font-size:12px!important;color:#475569!important;background:rgba(100,116,139,.13)!important;text-decoration:none!important}.market-chg.up{background:rgba(239,68,68,.16)!important;color:#b91c1c!important}.market-chg.down{background:rgba(22,163,74,.16)!important;color:#15803d!important}
  .market-grid.two{gap:8px!important}.market-panel a{text-decoration:none!important}
}


/* 20260611 market width data fix */
@media (min-width:1180px){.app{grid-template-columns:260px minmax(0,1120px) 360px!important;max-width:1760px!important}.desktop-ambient-panel{min-width:360px!important}.ambient-card{padding:22px 20px!important}.market-grid.two{grid-template-columns:1fr!important}.market-name{font-size:14px!important}.market-val,.market-chg{font-size:13px!important}.market-item{padding:10px 12px!important}}


/* 20260611 weather market visual clear */
@media (min-width:1180px){
  .ambient-card{background:#f8fbff!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 18px 45px rgba(15,23,42,.10)!important;color:#0f172a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .ambient-kicker,.market-title{color:#0f172a!important;text-shadow:none!important;letter-spacing:.03em!important}
  .market-head{border-bottom:1px solid rgba(15,23,42,.10);padding-bottom:8px;margin-bottom:2px;color:#0f172a!important;font-size:16px!important;font-weight:1000!important}
  .market-head small{margin-left:auto;border-radius:999px;background:#e0f2fe;color:#075985!important;padding:4px 8px;font-size:12px!important;font-weight:950!important}
  .market-title{font-size:14px!important;font-weight:1000!important;margin-top:2px!important}
  .market-item{background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(15,23,42,.06)!important}
  .market-name{color:#0f172a!important;font-size:14px!important;font-weight:1000!important}.market-val{color:#334155!important;font-size:13px!important;font-weight:900!important}.market-chg{min-width:58px;text-align:center;font-size:13px!important;font-weight:1000!important}
  .market-updated-label{font-size:12px;color:#475569;font-weight:900;margin-right:4px}
}


/* 20260611 center market title */
@media (min-width:1180px){
  .market-head{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;text-align:center!important}
  .market-head>span{grid-column:2!important;justify-self:center!important}
  .market-head>small{grid-column:3!important;justify-self:end!important;margin-left:0!important}
}


/* 20260611 market value align */
@media (min-width:1180px){
  .market-item{display:grid!important;grid-template-columns:72px 1fr 64px!important;align-items:center!important;column-gap:8px!important}
  .market-name{justify-self:start!important}.market-val{justify-self:center!important;text-align:center!important;font-variant-numeric:tabular-nums!important;min-width:92px!important}.market-chg{justify-self:end!important}
}


/* 20260611 market ytd column */
@media (min-width:1180px){.market-item{grid-template-columns:64px 1fr 64px 72px!important}.market-chg.ytd{min-width:66px!important}}


/* 20260611 market compact two-line layout */
@media (min-width:1180px){
  .market-grid{gap:10px!important}.market-item{display:grid!important;grid-template-columns:72px 1fr!important;grid-template-areas:"name badges" "value badges"!important;min-height:62px!important;padding:10px 12px!important;column-gap:10px!important;row-gap:2px!important;overflow:hidden!important}
  .market-name{grid-area:name!important;align-self:end!important;font-size:15px!important;line-height:1.1!important}.market-val{grid-area:value!important;justify-self:start!important;text-align:left!important;min-width:0!important;font-size:13px!important;line-height:1.15!important;color:#475569!important}.market-chg{grid-area:badges!important;justify-self:end!important;align-self:start!important;min-width:74px!important;border-radius:12px!important;padding:5px 7px!important;font-size:12px!important;line-height:1!important}.market-chg.ytd{align-self:end!important;min-width:74px!important}.market-chg.ytd::before{content:"YTD ";font-size:10px;font-weight:1000;opacity:.72}.market-chg.ytd{font-size:12px!important}
}


/* 20260611 market clean row layout */
@media (min-width:1180px){
  .market-grid{gap:8px!important}
  .market-item{display:grid!important;grid-template-columns:86px 1fr!important;grid-template-areas:"name price" "today ytd"!important;min-height:58px!important;padding:10px 12px!important;row-gap:7px!important;column-gap:10px!important;background:#fff!important;border-radius:16px!important}
  .market-name{grid-area:name!important;justify-self:start!important;align-self:center!important;font-size:15px!important;font-weight:1000!important;color:#0f172a!important}
  .market-val{grid-area:price!important;justify-self:end!important;align-self:center!important;text-align:right!important;min-width:0!important;font-size:13px!important;font-weight:950!important;color:#334155!important;font-variant-numeric:tabular-nums!important}
  .market-chg{grid-area:today!important;justify-self:start!important;align-self:center!important;min-width:auto!important;border-radius:999px!important;padding:4px 8px!important;font-size:12px!important;line-height:1!important}
  .market-chg::before{content:"今 ";font-size:10px;font-weight:1000;opacity:.72}
  .market-chg.ytd{grid-area:ytd!important;justify-self:end!important;align-self:center!important;min-width:auto!important;border-radius:999px!important;padding:4px 8px!important;font-size:12px!important;line-height:1!important}
  .market-chg.ytd::before{content:"年 ";font-size:10px;font-weight:1000;opacity:.72}
}


/* 20260611 market table layout */
@media (min-width:1180px){
  .market-grid{gap:7px!important}
  .market-grid::before{content:"市场      即时      今日涨幅    年涨幅";display:grid;grid-template-columns:58px 1fr 72px 70px;gap:8px;align-items:center;padding:0 10px 2px;color:#64748b;font-size:11px;font-weight:1000;white-space:pre;letter-spacing:.01em}
  .market-item{display:grid!important;grid-template-columns:58px minmax(82px,1fr) 72px 70px!important;grid-template-areas:none!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:8px 10px!important;border-radius:12px!important;background:#fff!important}
  .market-name{grid-area:auto!important;justify-self:start!important;font-size:13px!important;font-weight:1000!important;line-height:1!important;color:#0f172a!important}
  .market-val{grid-area:auto!important;justify-self:end!important;text-align:right!important;min-width:0!important;font-size:12px!important;font-weight:950!important;color:#334155!important;line-height:1!important;font-variant-numeric:tabular-nums!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .market-chg,.market-ytd{grid-area:auto!important;justify-self:end!important;min-width:0!important;border-radius:999px!important;padding:4px 7px!important;font-size:11px!important;font-weight:1000!important;line-height:1!important;text-align:center!important;font-variant-numeric:tabular-nums!important;white-space:nowrap!important}
  .market-chg::before,.market-ytd::before{content:""!important}
  .market-ytd.up,.market-chg.up{background:#dcfce7!important;color:#047857!important}.market-ytd.down,.market-chg.down{background:#fee2e2!important;color:#b91c1c!important}
}


/* 20260611 market header exact align */
@media (min-width:1180px){
  .market-grid::before{content:"市场" "即时" "今日涨幅" "年涨幅"!important;display:grid!important;grid-template-columns:58px minmax(82px,1fr) 72px 70px!important;gap:8px!important;align-items:center!important;padding:0 10px 4px!important;color:#475569!important;font-size:12px!important;font-weight:1000!important;white-space:normal!important;letter-spacing:0!important}
  .market-grid::before{text-align:left!important}
}


/* 20260611 market header real row */
@media (min-width:1180px){
  .market-grid::before{content:""!important;display:none!important}
  .market-grid{position:relative!important;padding-top:24px!important}
  .market-grid .market-item:first-child::before{content:"市场\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0即时\00a0\00a0\00a0\00a0今日涨幅\00a0\00a0年涨幅";position:absolute;left:10px;right:10px;top:0;height:18px;display:grid;grid-template-columns:58px minmax(82px,1fr) 72px 70px;gap:8px;align-items:center;color:#0f172a!important;font-size:12px!important;font-weight:1000!important;line-height:18px!important;white-space:pre!important;z-index:2!important}
  .market-item{grid-template-columns:58px minmax(82px,1fr) 72px 70px!important}
}


/* 20260611 market header lift */
@media (min-width:1180px){
  .market-grid{padding-top:18px!important}
  .market-grid .market-item:first-child::before{top:-6px!important;height:16px!important;line-height:16px!important}
}


/* 20260611 remove market table header words */
@media (min-width:1180px){
  .market-grid{padding-top:0!important}
  .market-grid::before,.market-grid .market-item:first-child::before{content:""!important;display:none!important}
}


/* 20260611 market section inline mini headers */
@media (min-width:1180px){
  .market-section{gap:7px!important}
  .market-title{
    display:grid!important;grid-template-columns:58px minmax(82px,1fr) 72px 70px!important;gap:8px!important;align-items:center!important;
    color:#0f172a!important;font-size:15px!important;font-weight:1000!important;letter-spacing:0!important;padding:0 10px!important;line-height:20px!important;
  }
  .market-title::before{content:"指数";grid-column:2;justify-self:center;background:#111827;color:#ff2d3d;border-radius:4px;padding:2px 7px;font-size:12px;font-weight:1000;line-height:16px;box-shadow:0 1px 4px rgba(0,0,0,.22)}
  .market-section:nth-of-type(3) .market-title::before{content:"市值"}
  .market-section:nth-of-type(4) .market-title::before{content:"价格"}
  .market-title::after{content:"今日       年初";grid-column:3/5;justify-self:stretch;color:#ff2d3d;font-size:11px;font-weight:1000;text-align:center;white-space:pre;letter-spacing:.08em}
  .market-grid{padding-top:0!important;gap:8px!important}
  .market-grid::before,.market-grid .market-item:first-child::before{content:""!important;display:none!important}
  .market-item{display:grid!important;grid-template-columns:58px minmax(82px,1fr) 72px 70px!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:8px 10px!important;border-radius:12px!important;background:#fff!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:none!important}
}


/* 20260611 market section headers white only */
@media (min-width:1180px){
  .market-title{color:#fff!important;text-shadow:0 1px 4px rgba(15,23,42,.45)!important}
  .market-title::before{background:transparent!important;color:#fff!important;box-shadow:none!important;padding:0!important;border-radius:0!important;text-shadow:0 1px 4px rgba(15,23,42,.45)!important}
  .market-title::after{color:#fff!important;text-shadow:0 1px 4px rgba(15,23,42,.45)!important}
}


/* 20260611 hide all market section/header labels */
@media (min-width:1180px){
  .market-title{display:none!important}
  .market-title::before,.market-title::after,
  .market-grid::before,.market-grid::after,
  .market-grid .market-item:first-child::before{content:""!important;display:none!important}
  .market-grid{padding-top:0!important}
}


/* 20260611 market refresh time lower */
@media (min-width:1180px){
  .market-head small{transform:translateY(6px)!important}
}


/* 20260611 market row shift left and refresh lower */
@media (min-width:1180px){
  .market-head small{transform:translateY(12px)!important}
  .market-item{grid-template-columns:54px minmax(72px,1fr) 60px 72px!important;gap:6px!important;padding-left:7px!important;padding-right:7px!important}
  .market-name{font-size:12px!important}
  .market-val{font-size:11px!important;justify-self:start!important;text-align:left!important}
  .market-chg,.market-ytd{font-size:11px!important;padding:4px 5px!important;justify-self:end!important}
}


/* 20260611 fix: hide desktop market/weather rail on mobile/narrow screens */
@media (max-width:1179px){
  .desktop-ambient-panel,
  .ambient-card,
  .market-panel{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .app{
    grid-template-columns:1fr!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body{overflow-x:hidden!important;}
}



/* 20260612 redo three hot entrance cards: clean premium tech */
#hot .card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
#hot .feature-card,#hot .feature-card>a{position:relative!important;min-height:184px!important;border-radius:28px!important;overflow:hidden!important}
#hot .feature-card{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(232,247,255,.62))!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 24px 70px rgba(42,82,130,.14),inset 0 1px 0 rgba(255,255,255,.92)!important;backdrop-filter:blur(18px) saturate(1.2)!important}
#hot .feature-card::before{content:"";position:absolute;inset:1px;border-radius:27px;pointer-events:none;background:radial-gradient(circle at 14% 18%,rgba(99,179,237,.20),transparent 28%),radial-gradient(circle at 96% 0%,rgba(168,85,247,.12),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,0))}
#hot .feature-card::after{content:"";position:absolute;left:22px;right:22px;bottom:16px;height:1px;opacity:.72;background:linear-gradient(90deg,transparent,rgba(59,130,246,.22),transparent)}
#hot .feature-card>a{display:grid!important;grid-template-columns:82px 1fr!important;align-items:center!important;gap:20px!important;padding:30px 32px!important;color:#122033!important;text-decoration:none!important;background:transparent!important;border:0!important}
#hot .feature-card .thumb{width:68px!important;height:68px!important;border-radius:20px!important;margin:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:linear-gradient(145deg,#071323,#0e2a42)!important;box-shadow:0 18px 34px rgba(37,99,235,.20),0 0 0 1px rgba(255,255,255,.55) inset!important}
#hot .feature-card .thumb img{width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(1.08) contrast(1.04)!important}
#hot .feature-card .thumb .tag{display:none!important}
#hot .feature-card .card-body{gap:8px!important;position:relative!important;z-index:1!important}
#hot .feature-card h3{font-size:22px!important;line-height:1.15!important;font-weight:950!important;letter-spacing:-.03em!important;color:#0b1730!important;text-shadow:none!important;margin:0!important}
#hot .feature-card p{display:block!important;max-width:22em!important;margin:0!important;color:rgba(34,52,78,.68)!important;font-size:13px!important;line-height:1.55!important;text-shadow:none!important}
#hot .feature-card .meta{display:flex!important;gap:8px!important;margin-top:2px!important}
#hot .feature-card .meta span{font-size:11px!important;font-weight:800!important;color:#2563eb!important;background:rgba(219,234,254,.72)!important;border:1px solid rgba(147,197,253,.45)!important;border-radius:999px!important;padding:4px 8px!important}
#hot .feature-card:hover{transform:translateY(-4px)!important;border-color:rgba(96,165,250,.56)!important;box-shadow:0 30px 86px rgba(42,82,130,.20),0 0 0 1px rgba(96,165,250,.16) inset!important}
#hot .feature-card:hover .thumb{transform:scale(1.04)!important;box-shadow:0 22px 46px rgba(37,99,235,.28),0 0 0 1px rgba(255,255,255,.72) inset!important}
#hot .feature-hover{display:none!important}
@media(max-width:760px){#hot .card-grid{grid-template-columns:1fr!important;gap:12px!important}#hot .feature-card,#hot .feature-card>a{min-height:126px!important;border-radius:24px!important}#hot .feature-card>a{grid-template-columns:58px 1fr!important;gap:15px!important;padding:20px!important}#hot .feature-card .thumb{width:54px!important;height:54px!important;border-radius:17px!important}#hot .feature-card h3{font-size:20px!important}#hot .feature-card p{font-size:12px!important;line-height:1.45!important;display:block!important}}


/* 20260612 performance cleanup: reduce duplicated heavy visual effects on mobile */
@media (max-width: 760px){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .hero::before,.hero::after,.page-photo-bg::before,.page-photo-bg::after,.ambient-orb,.glow-orb,.aurora,.mesh-bg,canvas#heroNetwork,canvas#networkCanvas{display:none!important}
  body,main,aside,.hero,section,.card,.link-card,.category-panel,.category-card,.run-panel,.vps-gauge-card,.tool-card,.status-card,.quick-card,.feature-card,.worldcup-panel{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 10px 28px rgba(15,23,42,.10)!important}
  .page-photo-bg{filter:none!important;transform:none!important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  canvas#heroNetwork,canvas#networkCanvas{display:none!important}
}


/* 20260612 mobile visual polish after Brave QA */
@media (max-width:760px){
  html,body{min-height:100%;background:#dbeef9!important;color:#102033!important;overflow-x:hidden!important;}
  body{background-attachment:fixed!important;}
  .app,main{background:transparent!important;}
  main{padding-top:max(18px,env(safe-area-inset-top))!important;padding-left:14px!important;padding-right:14px!important;}
  .hero h1,.hero-title,h1{font-size:clamp(26px,8vw,34px)!important;line-height:1.12!important;color:#101827!important;text-shadow:0 2px 12px rgba(255,255,255,.85)!important;max-width:calc(100vw - 92px)!important;overflow-wrap:anywhere!important;}
  .topbar,.site-bar,.subpage-top,.reader-top{padding-right:74px!important;}
  .quick-nav-toggle,.mobile-menu-toggle{right:14px!important;top:16px!important;background:rgba(71,85,105,.72)!important;border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 10px 28px rgba(15,23,42,.18)!important;}
  .card,.link-card,.category-card,.category-panel,.run-panel,.vps-gauge-card,.tool-card,.status-card,.quick-card,.cold-card,.entry,.favorite-card,.empty,.hero{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.78)!important;color:#102033!important;box-shadow:0 12px 30px rgba(15,23,42,.10)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .card p,.link-card p,.category-card p,.category-panel p,.run-panel p,.meta,small,.empty{color:rgba(30,48,70,.78)!important;}
  a{color:#dc2626!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;}
  .page-photo-bg{display:block!important;position:fixed!important;inset:0!important;height:100dvh!important;z-index:-1!important;background:#dbeef9!important;overflow:hidden!important;pointer-events:none!important;}
  .page-photo-bg span{background-size:cover!important;background-position:center top!important;filter:none!important;transform:none!important;}
  .page-photo-bg::after{background:linear-gradient(180deg,rgba(219,238,249,.34),rgba(219,238,249,.52))!important;}
  .vps-hero,.detail-card,.project-card,.folder-chip,.filter-chip{background:rgba(255,255,255,.72)!important;border-color:rgba(255,255,255,.76)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}


/* 20260612 mobile QA polish v2 */
@media (max-width:760px){
  .top{padding-right:76px!important;gap:10px!important;align-items:center!important;}
  .top .back{margin-right:72px!important;white-space:nowrap!important;}
  .top .pill{display:none!important;}
  .hero,.card,.empty,.project,.fav-card,.favorite-card,.cold-card,.entry,.category-card,.link-card{background:rgba(255,255,255,.86)!important;border-color:rgba(255,255,255,.86)!important;color:#101827!important;}
  .hero p,.card p,.empty,.project span,.meta,small{color:rgba(38,55,77,.82)!important;}
  .folder-chip,.filter-chip,.card-btn,.chip{background:rgba(255,255,255,.84)!important;color:#24516f!important;border-color:rgba(255,255,255,.88)!important;}
  .folder-chip.active,.filter-chip.active{background:rgba(236,254,255,.92)!important;color:#075985!important;box-shadow:0 0 0 2px rgba(45,212,191,.34)!important;}
  .page-photo-bg::after{background:linear-gradient(180deg,rgba(219,238,249,.62),rgba(219,238,249,.72))!important;}
  .page-photo-bg span{opacity:.72!important;}
}

/* extracted style 2 */
@media (max-width:760px){
  #directory .category-panel[open] .category-content,
  #directory .category-panel.is-open .category-content{
    display:block!important;
    padding:8px 0 14px!important;
  }
  #directory .category-panel[open] .category-content .card-grid,
  #directory .category-panel.is-open .category-content .card-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #directory .category-panel[open] .category-content .card,
  #directory .category-panel.is-open .category-content .card{
    display:block!important;
    background:rgba(255,255,255,.55)!important;
    border:1px solid rgba(255,255,255,.76)!important;
    border-radius:20px!important;
    box-shadow:0 10px 26px rgba(15,23,42,.13),inset 0 1px 0 rgba(255,255,255,.70)!important;
    overflow:hidden!important;
  }
  #directory .category-panel[open] .category-content a,
  #directory .category-panel.is-open .category-content a{
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    padding:12px!important;
    text-decoration:none!important;
  }
  #directory .category-panel[open] .category-content .thumb,
  #directory .category-panel.is-open .category-content .thumb{
    display:block!important;
    width:74px!important;height:74px!important;border-radius:16px!important;
    background-size:cover!important;background-position:center!important;
  }
  #directory .category-panel[open] .category-content h3,
  #directory .category-panel.is-open .category-content h3{color:#102033!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important;margin:0 0 6px!important;font-size:17px!important;}
  #directory .category-panel[open] .category-content p,
  #directory .category-panel.is-open .category-content p,
  #directory .category-panel[open] .category-content .meta,
  #directory .category-panel.is-open .category-content .meta{display:block!important;color:rgba(15,32,51,.72)!important;text-shadow:none!important;font-size:12px!important;line-height:1.35!important;}
  #chunyu-home{margin-top:18px!important;}
}


/* 20260612 late override: three hot cards full redesign */
#hot .card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
#hot .card-grid>.feature-card{min-height:184px!important;height:auto!important;padding:0!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(229,247,255,.70))!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 24px 70px rgba(42,82,130,.15),inset 0 1px 0 rgba(255,255,255,.95)!important;overflow:hidden!important}
#hot .card-grid>.feature-card>a{height:100%!important;min-height:184px!important;display:grid!important;grid-template-columns:76px 1fr!important;align-items:center!important;gap:18px!important;padding:28px!important;background:radial-gradient(circle at 18% 18%,rgba(125,211,252,.22),transparent 30%),radial-gradient(circle at 92% 0%,rgba(168,85,247,.10),transparent 32%)!important;border:0!important;color:#122033!important}
#hot .card-grid>.feature-card .thumb{width:66px!important;height:66px!important;border-radius:20px!important;margin:0!important;box-shadow:0 18px 36px rgba(37,99,235,.22),0 0 0 1px rgba(255,255,255,.64) inset!important;background:#071323!important;flex:none!important}
#hot .card-grid>.feature-card .thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
#hot .card-grid>.feature-card .thumb .tag,#hot .card-grid>.feature-card .feature-hover{display:none!important}
#hot .card-grid>.feature-card .card-body{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:7px!important;min-width:0!important}
#hot .card-grid>.feature-card h3{display:block!important;margin:0!important;color:#0b1730!important;font-size:22px!important;font-weight:950!important;line-height:1.12!important;letter-spacing:-.03em!important;text-shadow:none!important;white-space:nowrap!important}
#hot .card-grid>.feature-card p{display:block!important;margin:0!important;color:rgba(34,52,78,.70)!important;font-size:13px!important;line-height:1.5!important;max-width:21em!important;text-shadow:none!important}
#hot .card-grid>.feature-card .meta{display:flex!important;gap:7px!important;margin-top:2px!important;flex-wrap:wrap!important}
#hot .card-grid>.feature-card .meta span{display:inline-flex!important;align-items:center!important;border-radius:999px!important;padding:4px 8px!important;background:rgba(219,234,254,.78)!important;border:1px solid rgba(147,197,253,.48)!important;color:#2563eb!important;font-size:11px!important;font-weight:850!important;line-height:1!important}
#hot .card-grid>.feature-card:hover{transform:translateY(-4px)!important;border-color:rgba(96,165,250,.62)!important;box-shadow:0 30px 86px rgba(42,82,130,.21),0 0 0 1px rgba(96,165,250,.18) inset!important}
@media(max-width:760px){#hot .card-grid{grid-template-columns:1fr!important;gap:12px!important}#hot .card-grid>.feature-card,#hot .card-grid>.feature-card>a{min-height:128px!important;border-radius:24px!important}#hot .card-grid>.feature-card>a{grid-template-columns:58px 1fr!important;gap:15px!important;padding:20px!important}#hot .card-grid>.feature-card .thumb{width:54px!important;height:54px!important;border-radius:17px!important}#hot .card-grid>.feature-card h3{font-size:20px!important}#hot .card-grid>.feature-card p{font-size:12px!important;line-height:1.45!important}}



/* 20260612 World Cup rail widget */
.worldcup-panel{margin:18px 0 0;display:grid;gap:10px;pointer-events:auto}
.worldcup-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:1000;color:#0f172a;border-bottom:1px solid rgba(15,23,42,.10);padding-bottom:8px}
.worldcup-head small{border-radius:999px;background:#e0f2fe;color:#075985;padding:4px 8px;font-size:12px;font-weight:950}
.worldcup-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.worldcup-block{display:grid;gap:7px}
.worldcup-title{font-size:13px;font-weight:1000;color:#0f172a;text-shadow:none}
.worldcup-list{display:grid;gap:7px}
.worldcup-match{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:9px 10px;box-shadow:0 6px 16px rgba(15,23,42,.06);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 10px;align-items:center}
.worldcup-row{display:contents;font-size:13px;font-weight:950;color:#0f172a;line-height:1.15}
.worldcup-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.worldcup-time,.worldcup-score{font-size:12px;font-weight:1000;border-radius:999px;padding:4px 7px;background:#dcfce7;color:#047857;white-space:nowrap}.worldcup-score{grid-column:2!important;grid-row:1/3!important;display:grid!important;grid-template-rows:1fr auto 1fr!important;align-items:center!important;justify-items:center!important;align-self:stretch!important;min-width:34px!important;padding:5px 8px!important;line-height:1!important}
.worldcup-score{background:#fee2e2;color:#b91c1c}
.worldcup-empty{border-radius:14px;padding:10px;background:rgba(255,255,255,.72);color:#475569;font-size:12px;font-weight:850}



/* 20260612 World Cup rail readability fix */
.worldcup-panel{background:#f8fbff!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:24px!important;box-shadow:0 18px 45px rgba(15,23,42,.10)!important;padding:16px!important;color:#0f172a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.worldcup-tabs{grid-template-columns:1fr!important;gap:12px!important}
.worldcup-title{color:#0f172a!important;text-shadow:none!important}
.worldcup-block{gap:7px!important}.worldcup-list{gap:7px!important}
.worldcup-match{background:#fff!important;color:#0f172a!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 6px 16px rgba(15,23,42,.06)!important}
.worldcup-row{color:#0f172a!important}.worldcup-row small{color:#94a3b8!important;font-weight:1000!important}
.worldcup-empty{min-height:38px!important;display:flex!important;align-items:center!important;background:#fff!important;border:1px dashed rgba(148,163,184,.45)!important;color:#64748b!important}


/* 20260612 worldcup modal */
.worldcup-clickable{cursor:pointer}.worldcup-modal{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px}.worldcup-modal.show{display:flex}.worldcup-modal-box{width:min(520px,94vw);max-height:82vh;overflow:auto;background:#fff;border-radius:24px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.35);color:#0f172a}.worldcup-modal-box h3{margin:0 0 14px;font-size:18px}.worldcup-close{position:fixed!important;right:22px!important;top:22px!important;z-index:10001!important;border:0;background:#fee2e2;color:#991b1b;border-radius:999px;width:44px;height:44px;font-size:26px;font-weight:900;box-shadow:0 10px 28px rgba(153,27,27,.18);line-height:1;display:flex;align-items:center;justify-content:center}.worldcup-modal-list{display:grid;gap:8px}

.worldcup-score em{display:block;width:12px;height:2px;border-radius:999px;background:currentColor;opacity:.45}

.worldcup-match .worldcup-row:first-child span:first-child{grid-column:1;grid-row:1}.worldcup-match .worldcup-row:nth-child(2) span:first-child{grid-column:1;grid-row:2}.worldcup-match .worldcup-row:nth-child(2) small{grid-column:2;grid-row:2;align-self:end;justify-self:end}.worldcup-match b{display:contents}

/* extracted style 3 */
@media (max-width:760px){
  *{scroll-behavior:auto!important;}
  body{background:#eef6fb!important;-webkit-font-smoothing:antialiased!important;}
  .site-photo-bg span:not(:first-child),.page-photo-bg span:not(:first-child){display:none!important;animation:none!important;}
  .site-photo-bg span,.page-photo-bg span{animation:none!important;transition:none!important;opacity:.10!important;filter:saturate(.55) brightness(1.28) contrast(.7)!important;transform:none!important;background-attachment:scroll!important;}
  .site-photo-bg:after,.page-photo-bg:after{content:""!important;position:absolute!important;inset:0!important;display:block!important;background:rgba(242,248,252,.96)!important;z-index:2!important;pointer-events:none!important;}
  .top,.topbar,.site-bar,.subpage-top,.reader-top{min-height:42px!important;padding-right:76px!important;gap:10px!important;align-items:center!important;}
  .back,.top .back{white-space:nowrap!important;max-width:calc(100vw - 110px)!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .quick-nav-toggle,.mobile-menu-toggle{right:14px!important;top:max(14px,env(safe-area-inset-top))!important;background:rgba(71,85,105,.72)!important;border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 10px 28px rgba(15,23,42,.16)!important;}
  .card,.hero,.empty,.project,.fav-card,.favorite-card,.cold-card,.entry,.category-card,.link-card,.panel,.section{background:rgba(255,255,255,.96)!important;border-color:rgba(255,255,255,.92)!important;box-shadow:0 12px 30px rgba(28,63,96,.10)!important;}
  h1,h2,h3,.title,.section-title{color:#102033!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important;}
  p,small,.muted,.desc,.meta,.project span{color:rgba(38,55,77,.82)!important;}
  @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;}}
}

/* 20260613 personal cockpit */
.personal-cockpit{
  margin:18px 0 26px;
  padding:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(36,50,75,.70));
  box-shadow:0 20px 54px rgba(0,0,0,.22);
}
.cockpit-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.cockpit-kicker{display:block;color:#8bd7ff;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cockpit-head h2{margin:3px 0 0;font-size:24px;line-height:1.1;color:#fff}
.cockpit-actions{display:flex;gap:8px}.cockpit-icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer}.cockpit-icon-btn.active{background:#f8d45c;color:#172033}
.cockpit-fold-btn{width:auto;min-width:72px;padding:0 14px}.cockpit-fold-btn .collapse-indicator{min-height:0;padding:0;border:0;font-size:13px;font-weight:900;line-height:1;color:inherit}
.cockpit-search{position:relative;margin-bottom:14px}.cockpit-search input{width:100%;height:46px;border:1px solid rgba(255,255,255,.20);border-radius:14px;background:rgba(255,255,255,.10);color:#fff;padding:0 48px 0 15px;font:inherit;font-weight:800;outline:none}.cockpit-search input::placeholder{color:rgba(255,255,255,.58)}.cockpit-search>button{position:absolute;right:7px;top:7px;width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
.search-results{display:none;position:absolute;left:0;right:0;top:52px;z-index:20;padding:8px;border-radius:14px;background:#f8fbff;border:1px solid rgba(148,163,184,.42);box-shadow:0 18px 48px rgba(15,23,42,.22)}.search-results.open{display:grid;gap:6px}.search-result{display:grid;gap:3px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#172033}.search-result:hover{background:#eaf3ff}.search-result span{color:#64748b;font-size:12px}
.cockpit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cockpit-tile{display:grid;gap:5px;min-height:82px;padding:13px;border-radius:14px;text-decoration:none;background:rgba(255,255,255,.92);color:#162033;border:1px solid rgba(255,255,255,.9)}.cockpit-tile b{font-size:15px}.cockpit-tile span{font-size:12px;line-height:1.35;color:#526179;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.study-checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.study-checks button{border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:8px 13px;font-weight:900;cursor:pointer}.study-checks button.done{background:#2dd4bf;color:#0f172a;border-color:#99f6e4}
.pinned-strip{display:flex;gap:8px;overflow:auto;margin-top:12px;padding-bottom:2px}.pinned-strip a,.pin-empty{flex:0 0 auto;min-width:150px;max-width:220px;border-radius:13px;padding:10px 12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);text-decoration:none;color:#fff}.pinned-strip b{display:block;font-size:13px}.pinned-strip span{display:block;margin-top:4px;color:rgba(255,255,255,.68);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin-card-btn{position:absolute;right:10px;top:10px;z-index:4;width:32px;height:32px;border:1px solid rgba(255,255,255,.50);border-radius:50%;background:rgba(15,23,42,.54);color:#fff;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18)}.pin-card-btn.active{background:#facc15;color:#172033;border-color:#fde68a}.card{position:relative}
.command-palette{position:fixed;inset:0;z-index:1000;display:none;place-items:start center;padding-top:12vh;background:rgba(7,13,28,.48);backdrop-filter:blur(10px)}.command-palette.open{display:grid}.command-panel{width:min(680px,calc(100vw - 28px));border-radius:18px;background:#f8fbff;border:1px solid rgba(255,255,255,.8);box-shadow:0 28px 90px rgba(0,0,0,.35);padding:12px}.command-panel input{width:100%;height:48px;border:1px solid #d7e2f0;border-radius:13px;padding:0 14px;font:inherit;font-weight:900;color:#102033}.command-list{display:grid;gap:6px;margin-top:10px;max-height:54vh;overflow:auto}.command-list button{display:grid;gap:3px;text-align:left;border:0;border-radius:12px;background:transparent;padding:11px 12px;color:#102033;cursor:pointer}.command-list button:hover{background:#e8f2ff}.command-list span{font-size:12px;color:#64748b}
body.tonight-mode{background:#050814!important}body.tonight-mode .hero{min-height:46vh!important}body.tonight-mode .content-section:not(#hot),body.tonight-mode .desktop-ambient-panel{display:none!important}body.tonight-mode .personal-cockpit{background:linear-gradient(135deg,rgba(2,6,23,.94),rgba(15,23,42,.88));border-color:rgba(125,211,252,.18)}body.tonight-mode aside{background:rgba(2,6,23,.86)}body.tonight-mode .sidebar-music-console{transform:scale(1.02);transform-origin:left top}
@media(max-width:760px){.personal-cockpit{margin:14px 0 20px;padding:14px;border-radius:16px}.cockpit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cockpit-tile{min-height:76px;padding:11px}.cockpit-head h2{font-size:21px}.pin-card-btn{width:30px;height:30px}.command-palette{padding-top:8vh}.search-results{position:fixed;left:14px;right:14px;top:118px}.pinned-strip a,.pin-empty{min-width:138px}}

/* ===== 今日简报 ===== */
.daily-brief-section { margin: 12px 0 20px; }
.daily-brief-section .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; padding: 0 4px; }
.daily-brief-section .section-head h2 { font-size: 14px; font-weight: 800; margin: 0; color: var(--muted); }
.daily-brief-section .section-head span { font-size: 11px; color: var(--muted); opacity: 0.6; }
.brief-sources { display: grid; gap: 10px; }
.brief-source-group { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 12px 14px; }
.brief-source-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: var(--ink); }
.brief-icon { font-size: 14px; }
.brief-item-list { list-style: none; margin: 0; padding: 0; }
.brief-item-list li { font-size: 13px; line-height: 1.5; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.brief-item-list li:last-child { border-bottom: none; }
.brief-item-list li a { color: var(--ink); text-decoration: none; display: block; }
.brief-item-list li a:hover { color: var(--accent); }
.brief-item-list li a::before { content: ▸ ; opacity: 0.4; }
.brief-item-list li a:hover::before { opacity: 0.8; }
.brief-loading { color: var(--muted); font-size: 12px; opacity: 0.5; }
.brief-study-status { font-size: 13px; color: var(--ink); line-height: 1.5; }
.study-ok { color: #22c55e; font-weight: 800; }
.study-miss { color: #f59e0b; font-weight: 800; }
.study-none { color: var(--muted); font-size: 12px; opacity: 0.6; }
@media (min-width: 768px) {
  .brief-sources { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .brief-source-group.full-width { grid-column: 1 / -1; }
}
@media (prefers-color-scheme: light) {
  .daily-brief-section .section-head h2 { color: #334155; }
  .brief-source-group { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
  .brief-item-list li { border-bottom-color: rgba(0,0,0,0.04); }
  .brief-item-list li a { color: #1e293b; }
}

/* Collapse 今日简报 / 热门入口 by default - 20260614 */
.collapsible-section .collapsible-head {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.collapsible-section .section-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.collapsible-section .section-title-wrap > span {
  white-space: nowrap;
}
.collapsible-section .collapse-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(83, 172, 231, 0.22);
  background: rgba(255, 255, 255, 0.34);
  color: rgba(30, 48, 70, 0.76) !important;
  font-size: 12px !important;
  font-weight: 800;
}
.collapsible-section .collapse-indicator::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s ease;
}
.collapsible-section:not(.is-collapsed) .collapse-indicator::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.collapsible-section.is-collapsed .collapsible-head {
  margin-bottom: 0 !important;
}
.collapsible-section.is-collapsed .collapsible-body {
  display: none !important;
}
.collapsible-section .collapsible-body {
  display: block;
}
@media (max-width: 760px) {
  .collapsible-section .collapsible-head {
    gap: 10px;
  }
  .collapsible-section .section-title-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .collapsible-section .section-title-wrap > span {
    white-space: normal;
  }
  .collapsible-section .collapse-indicator {
    min-height: 30px;
    padding: 6px 10px;
  }
}