/* Created by Yanjunhui */
    * { box-sizing: border-box; }
    [v-cloak] { display: none; }
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      margin: 0;
      background-color: rgba(240, 247, 230, 0.8);
      color: #222;
    }
    #app {
      min-height: 100vh;
      width: 100%;
      max-width: 100%;
      position: relative;
      z-index: 1;
      overflow-x: hidden;
    }
    .mobile-topbar,
    .mobile-sidebar-scrim {
      display: none;
    }
    #particle-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0.45;
      pointer-events: none;
    }
    .shell {
      display: flex;
      min-height: 100vh;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    .global-sidebar {
      width: 280px;
      height: 100vh;
      position: sticky;
      top: 0;
      align-self: flex-start;
      background: #ffffff;
      border-right: 1px solid #f0f0f2;
      padding: 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .sb-header {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      cursor: pointer;
    }
    .sb-brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sb-brand-icon {
      width: 27px;
      height: 27px;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .sb-title {
      font-size: 24px;
      font-weight: 700;
      margin: 0;
    }
    .sb-brand-accent {
      color: #ff4d3b;
    }
    .sb-sub {
      font-size: 12px;
      color: #666;
      margin-bottom: 10px;
    }
    .sb-top {
      flex: 0 0 auto;
      background: #fff;
      position: relative;
      z-index: 2;
    }
    .sb-history {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 2px;
    }
    .sb-history-prev-gap {
      height: 56px;
      flex: 0 0 auto;
      pointer-events: none;
    }
    .history-item-spacer {
      visibility: hidden;
      pointer-events: none;
      flex: 0 0 auto;
    }
    .sb-new-btn {
      width: 100%;
      margin: 0 0 20px 0;
      padding: 9px 10px;
      border: none;
      border-radius: 10px;
      background: #f3f4f6;
      color: #222222;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
    }
    .sb-new-btn:hover {
      background: #FF6B3B;
      color: #ffffff;
    }
    .usage-card {
      margin: 0 0 10px 0;
      padding: 10px 10px;
      border-radius: 10px;
      background: #f7f8fb;
      color: #444;
      font-size: 12px;
      line-height: 1.45;
    }
    .usage-plan {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 4px;
      color: #333;
    }
    .sb-footer {
      margin-top: auto;
      padding-top: 10px;
      flex: 0 0 auto;
      background: #fff;
      position: relative;
      z-index: 2;
    }
    .account-wrap { position: relative; }
    .account-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8f8fa;
      border: none;
      color: #222;
      border-radius: 10px;
      padding: 8px 10px;
      margin: 0;
      cursor: pointer;
      text-align: left;
    }
    .account-trigger:hover { background: #f1f2f5; }
    .account-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #e6f0ff;
      color: #3b5fbf;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .account-name {
      font-size: 13px;
      color: #444;
      word-break: break-word;
      flex: 1;
    }
    .account-menu {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 8px);
      background: #fff;
      border: 1px solid #f0f0f2;
      border-radius: 10px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
      padding: 6px;
      z-index: 10;
    }
    .account-menu-btn {
      width: 100%;
      border: none;
      margin: 0;
      padding: 8px 10px;
      text-align: left;
      color: #222;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
    }
    .account-menu-btn:hover { background: #f5f5f7; }
    .history-item {
      border: none;
      border-radius: 10px;
      padding: 11px 8px;
      margin: 0;
      cursor: pointer;
      font-size: 13px;
      background: transparent;
      line-height: 1.35;
      position: relative;
    }
    .history-item::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #f1f1f3;
    }
    .history-item:hover { background: #f7f7f8; }
    .history-item.active {
      background: #f6fbf1;
    }
    .history-item.active::after,
    .history-item.prev-active::after,
    .history-item:hover::after,
    .history-item.prev-hover::after,
    .history-item:last-child::after {
      display: none;
    }
    .history-item small { color: #666; }

    .content {
      flex: 1;
      min-width: 0;
      padding: 16px 20px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    @media (min-width: 901px) {
      html,
      body,
      #app {
        height: 100%;
      }
      body {
        overflow: hidden;
      }
      .shell {
        height: 100vh;
        min-height: 100vh;
      }
      .global-sidebar {
        height: 100vh;
        max-height: 100vh;
        flex-shrink: 0;
      }
      .content {
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
      }
      .result-card {
        max-width: min(860px, calc(100vw - 320px));
      }
    }
    .mobile-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid rgba(232, 232, 235, 0.92);
      backdrop-filter: blur(16px);
    }
    .mobile-topbar-main {
      min-width: 0;
      flex: 1;
    }
    .mobile-topbar-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #1f2328;
    }
    .mobile-topbar-sub {
      margin-top: 3px;
      font-size: 12px;
      color: #6f7078;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-drawer-toggle,
    .mobile-topbar-action {
      margin: 0;
      min-width: 44px;
      min-height: 44px;
      border: 1px solid #e1e2e8;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.95);
      color: #2b2e34;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(32, 36, 41, 0.08);
    }
    .mobile-drawer-toggle {
      position: relative;
      color: transparent;
    }
    .mobile-drawer-toggle::before,
    .mobile-drawer-toggle::after,
    .mobile-drawer-toggle .mobile-drawer-bars {
      content: "";
      position: absolute;
      left: 50%;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: #2b2e34;
      transform: translateX(-50%);
      transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
    }
    .mobile-drawer-toggle::before {
      top: 15px;
    }
    .mobile-drawer-toggle .mobile-drawer-bars {
      top: 21px;
    }
    .mobile-drawer-toggle::after {
      top: 27px;
    }
    .mobile-drawer-toggle.is-open::before {
      top: 17px;
      width: 12px;
      transform: translateX(-58%) rotate(-45deg);
    }
    .mobile-drawer-toggle.is-open .mobile-drawer-bars {
      opacity: 0;
    }
    .mobile-drawer-toggle.is-open::after {
      top: 25px;
      width: 12px;
      transform: translateX(-58%) rotate(45deg);
    }
    .mobile-topbar-action {
      padding: 0 14px;
      text-decoration: none;
    }
    .mobile-sidebar-scrim {
      position: fixed;
      inset: 0;
      z-index: 34;
      background: rgba(14, 18, 24, 0.34);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }
    .mobile-sidebar-scrim.visible {
      opacity: 1;
      pointer-events: auto;
    }
    .site-footer {
      width: 100%;
      max-width: 860px;
      margin-top: auto;
      padding: 14px 0 8px;
      font-size: 12px;
      line-height: 1.6;
      color: #76767d;
      text-align: center;
    }
    .site-footer > div + div {
      margin-top: 8px;
    }
    .site-footer a {
      color: #5e5e66;
      text-decoration: underline;
      margin: 0 6px;
    }
    .site-footer a:hover { color: #2f2f34; }
    .logo {
      width: min(100%, 400px);
      height: auto;
      margin: 12px auto;
      display: block;
    }
    .hero-title {
      margin: 0;
      color: #202127;
      font-weight: 700;
      line-height: 1;
    }
    .hero-title-accent {
      color: #ff6b3b;
      font-size: 1.08em;
      font-weight: 800;
    }
    .subtitle {
      margin-top: 8px;
      margin-bottom: 8px;
      color: #555;
    }
    .input-group {
      margin: 0;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      text-align: left;
      display: grid;
      gap: 8px;
    }
    .input-group select {
      margin: 0;
      width: 100%;
      min-height: 50px;
      padding: 8px 42px 8px 14px;
      border: 1px solid #d6d7dc;
      border-radius: 10px;
      background-color: #ffffff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2337373c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px 18px;
      box-shadow: none;
      color: #24252b;
      line-height: 1.2;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    .input-group select:focus {
      outline: none;
      border-color: #c8cad2;
      box-shadow: 0 0 0 3px rgba(58, 58, 66, 0.08);
    }
    .input-group select::-ms-expand {
      display: none;
    }
    .timezone-select {
      width: 100%;
      max-width: 100%;
    }

    select, button {
      padding: 8px;
      margin: 5px;
      font-size: 16px;
      border-radius: 4px;
      border: 1px solid #ddd;
    }
    button {
      border: none;
      cursor: pointer;
      color: white;
    }
    .start-button { background: #FF6B3B; padding: 12px 30px; }
    .login-button { background: #4A90E2; }
    .login-choice {
      width: 100%;
      max-width: 320px;
      margin: 14px auto 0;
      text-align: center;
    }
    .or-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #8a8a91;
      font-size: 12px;
      margin: 12px 0 14px;
    }
    .or-divider::before,
    .or-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #dddddf;
    }
    .login-inline-btn {
      width: 100%;
      margin: 0;
      border: 1px solid #d5d6db;
      border-radius: 10px;
      background:
        radial-gradient(circle at 16% 22%, rgba(174, 222, 248, 0.46) 0%, transparent 50%),
        radial-gradient(circle at 84% 26%, rgba(243, 214, 173, 0.42) 0%, transparent 52%),
        radial-gradient(circle at 44% 82%, rgba(197, 233, 186, 0.42) 0%, transparent 56%),
        #f5f6f9;
      background-size: 180% 180%;
      background-position: 0% 0%;
      color: #3a3d44;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 12px;
      position: relative;
      overflow: hidden;
      animation: loginAuraShift 10s linear infinite, loginAuraPulse 6.5s ease-in-out infinite alternate;
    }
    .login-inline-btn:hover {
      background-color: #eceef2;
      border-color: #c8cad0;
    }
    @keyframes loginAuraShift {
      0% { background-position: 0% 0%; }
      25% { background-position: 100% 12%; }
      50% { background-position: 84% 100%; }
      75% { background-position: 12% 84%; }
      100% { background-position: 0% 0%; }
    }
    @keyframes loginAuraPulse {
      0% { filter: saturate(95%) brightness(1.01); }
      50% { filter: saturate(110%) brightness(1.08); }
      100% { filter: saturate(100%) brightness(1.03); }
    }
    .login-inline-tip {
      margin-top: 6px;
      font-size: 12px;
      color: #7a7a82;
    }
    .home-faq {
      margin: 60px auto 8px;
      max-width: 720px;
    }
    .faq-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 auto 14px;
      max-width: 420px;
      color: #7f7f86;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .faq-divider::before,
    .faq-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 107, 59, 0), rgba(255, 107, 59, 0.45), rgba(255, 107, 59, 0));
    }
    .help-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 0 auto;
      max-width: 720px;
    }
    .help-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 107, 59, 0.18);
      background: rgba(255, 255, 255, 0.82);
      color: #554b47;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      box-shadow: 0 6px 16px rgba(112, 96, 75, 0.08);
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
    }