:root {  --primary-color: #2563EB;  --warning-color: #E6A23C;  --primary-hover: #1D4ED8;  --text-main: #111827;  --text-secondary: #4B5563;  --bg-color: #f9fafb;  --font-heading: 'Noto Sans SC', sans-serif;}* { box-sizing: border-box; margin: 0; padding: 0; }body {  font-family: var(--font-heading), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  background-color: var(--bg-color);  color: var(--text-main);  line-height: 1.5;  overflow-x: hidden;}button { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }a { text-decoration: none; color: inherit; }input, textarea { font-family: inherit; }.hidden { display: none !important; }.fade-in { animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1); }@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }.reveal-on-scroll {  opacity: 0;  transform: translateY(30px);  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);}.reveal-visible {  opacity: 1;  transform: translateY(0);}.features-grid .feature-card:nth-child(1) { transition-delay: 100ms; }.features-grid .feature-card:nth-child(2) { transition-delay: 150ms; }.features-grid .feature-card:nth-child(3) { transition-delay: 200ms; }.features-grid .feature-card:nth-child(4) { transition-delay: 250ms; }.features-grid .feature-card:nth-child(5) { transition-delay: 300ms; }.features-grid .feature-card:nth-child(6) { transition-delay: 350ms; }.features-grid .feature-card:nth-child(7) { transition-delay: 400ms; }.features-grid .feature-card:nth-child(8) { transition-delay: 450ms; }.features-grid .feature-card:nth-child(9) { transition-delay: 500ms; }.showcase-grid .showcase-card:nth-child(1) { transition-delay: 100ms; }.showcase-grid .showcase-card:nth-child(2) { transition-delay: 150ms; }.showcase-grid .showcase-card:nth-child(3) { transition-delay: 200ms; }.showcase-grid .showcase-card:nth-child(4) { transition-delay: 100ms; } .showcase-grid .showcase-card:nth-child(5) { transition-delay: 150ms; }.showcase-grid .showcase-card:nth-child(6) { transition-delay: 200ms; }.showcase-grid .showcase-card:nth-child(7) { transition-delay: 100ms; }.showcase-grid .showcase-card:nth-child(8) { transition-delay: 150ms; }.showcase-grid .showcase-card:nth-child(9) { transition-delay: 200ms; }.lang-selector { position: relative; }.lang-dropdown {  position: absolute;  top: calc(100% + 0.5rem);  right: 0;  background: white;  border: 1px solid #e5e7eb;  border-radius: 0.75rem;  padding: 0.5rem;  min-width: 140px;  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);  display: none;  flex-direction: column;  gap: 0.25rem;  z-index: 100;    max-height: calc(90vh - 3.5rem);    overflow: auto;}.lang-dropdown.show { display: flex; animation: fadeIn 0.2s ease; }.lang-option {  padding: 0.5rem 1rem;  font-size: 0.85rem;  color: #4B5563;  border-radius: 0.5rem;  cursor: pointer;  transition: all 0.2s;  white-space: nowrap;}.lang-option:hover { background-color: #F3F4F6; color: #111827; }.lang-option.active { background-color: #EFF6FF; color: var(--primary-color); font-weight: 600; }#landing-view {  background-color: #ffffff;  min-height: 100vh;  display: flex;  flex-direction: column;}.landing-header {  padding: 1.5rem 1.5rem;  display: flex;  justify-content: space-between;  align-items: center;  position: absolute;  top: 0; left: 0; right: 0;  z-index: 50;}.logo { font-weight: 400; font-size: 1.2rem; color: var(--primary-color); margin-bottom: 0; display: flex;align-items: center; gap: 6px;font-family: math, -apple-system}.logo span { color: #111827; }.header-actions {  display: flex; align-items: center; gap: 0.75rem;}.header-btn {  display: flex; align-items: center; gap: 0.5rem;  color: #111827;  padding: 0.5rem 1rem;  border-radius: 99px;  font-size: 0.9rem;  font-weight: 500;  transition: background 0.2s;  border: 1px solid transparent;}.header-btn:hover {  background-color: #F3F4F6;  border-color: #E5E7EB;}.header-login-btn {  background: #111827; color: white;   padding: 0.5rem 1.2rem;  border-radius: 99px;   font-size: 0.9rem; font-weight: 500;   transition: opacity 0.2s;}.header-login-btn:hover { opacity: 0.9; }.hero-section {  display: flex;  align-items: center;  padding: 8rem 0 4rem;  background: radial-gradient(circle at 50% 0%, #EFF6FF 0%, #ffffff 60%);  overflow-x: hidden;}.hero-content {  max-width: 800px;  margin: 0 auto;  text-align: center;  padding-left: 1.5rem;  padding-right: 1.5rem;}.hero-badge {  display: inline-block;  background: #EFF6FF;  color: var(--primary-color);  padding: 0.25rem 1rem;  border-radius: 99px;  font-size: 0.875rem;  font-weight: 600;  margin-bottom: 1.5rem;  border: 1px solid #DBEAFE;}.hero-title {  font-size: 2.5rem;  font-weight: 800;  color: #111827;  margin-bottom: 1.5rem;  line-height: 1.1;  letter-spacing: -0.03em;}@media(min-width: 768px) { .hero-title { font-size: 4rem; } }.hero-subtitle {  font-size: 1.125rem;  color: #4B5563;  margin-bottom: 3rem;  max-width: 640px;  margin-left: auto;  margin-right: auto;  line-height: 1.6;}.subtitle-highlight {    display: block;    margin-top: 1.5rem;    color: var(--text-main);    font-weight: 600;    font-size: 1.1rem;}.input-group-wrapper {  background: white;  padding: 0.5rem;  border-radius: 1rem;  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  display: flex;  align-items: center;  width: 100%;  max-width: 480px;  margin: 0 auto;  border: 1px solid #E5E7EB;  transition: all 0.3s ease;}.input-group-wrapper:focus-within {  transform: translateY(-2px);  box-shadow: 0 25px 30px -5px rgba(37, 99, 235, 0.15);  border-color: var(--primary-color);}.input-prefix {    padding-left: 1rem;    padding-right: 0.2rem;  color: #9CA3AF;  font-weight: 500;  font-size: 1rem;  display: flex;  align-items: center;  white-space: nowrap;  user-select: none;}.main-input {  flex: 1;  border: none;  outline: none;  font-size: 1rem;  color: #111827;  min-width: 0;  background: transparent;  padding: 0.8rem 0;}.cta-button {  background-color: var(--primary-color);  color: white;  font-weight: 600;  padding: 0 1.5rem;  height: 3rem;  border-radius: 0.75rem;  transition: all 0.2s;  white-space: nowrap;  display: flex;  align-items: center;  justify-content: center;}.cta-button:hover { background-color: var(--primary-hover); transform: translateY(-1px); }.landing-features {  padding: 4rem 0;  background-color: #F9FAFB;}.landing-section-title {    text-align: center;    font-size: 2rem;    font-weight: 800;    color: #111827;    margin-bottom: 3rem;    letter-spacing: -0.02em;}.features-grid {  display: grid;  grid-template-columns: repeat(1, 1fr);  gap: 1.5rem;}@media(min-width: 768px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }.feature-card {  padding: 1.5rem;  background: #ffffff;  border-radius: 1rem;  border: 1px solid #f3f4f6;  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);  display: flex;  align-items: flex-start;  gap: 1rem;  text-align: left;}.feature-card:hover {  transform: translateY(-4px);  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);  border-color: #e5e7eb;}.feature-icon {  width: 3rem; height: 3rem;   background: #EFF6FF;   border-radius: 0.75rem;  display: flex; align-items: center; justify-content: center;   color: var(--primary-color);  flex-shrink: 0;  transition: all 0.3s;  margin-bottom: 0;}.feature-card:hover .feature-icon {  background: var(--primary-color);  color: white;}.feature-content h3 {   font-size: 1.1rem;   font-weight: 700;   margin-bottom: 0.25rem;  color: #111827;}.feature-content p {   color: #4B5563;   font-size: 0.9rem;   line-height: 1.5;}.showcase-section {  padding: 4rem 0;  background-color: #ffffff;  border-top: 1px solid #f3f4f6; }.showcase-title {  text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 3rem; color: #111827;}.showcase-grid {  display: grid; grid-template-columns: 1fr; gap: 2rem;}@media(min-width: 768px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); } }.showcase-card {  border-radius: 1.5rem;   overflow: hidden;   border: 1px solid #f3f4f6;  background: white;  transition: all 0.3s ease;   cursor: pointer;  display: flex;  flex-direction: column;}.showcase-card:hover {  transform: translateY(-8px);  box-shadow: 0 20px 30px -10px rgba(0,0,0,0.08);  border-color: #e5e7eb;}.showcase-banner {  height: 7rem;  width: 100%;  background-size: cover;  background-position: center;  background-color: #eee;}.showcase-content {  padding: 0 1.5rem 1.5rem;  text-align: center;  position: relative;}.showcase-avatar {  width: 4.5rem;   height: 4.5rem;   border-radius: 50%;   border: 4px solid white;  object-fit: cover;  margin-top: -2.25rem;  margin-bottom: 0.75rem;  background: #fff;  box-shadow: 0 2px 4px rgba(0,0,0,0.05);}.showcase-name {    font-weight: 700;    font-size: 1.2rem;    color: #111827;    margin-bottom: 0.25rem;    overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;}.showcase-tags {    display: flex;    flex-wrap: wrap;    justify-content: center;    gap: 0.5rem;    margin-top: 0.25rem;}.showcase-tag {   font-size: 0.75rem;   color: var(--primary-color);   font-weight: 500;  background: #EFF6FF;  padding: 0.2rem 0.6rem;  border-radius: 99px;  white-space: nowrap;}.landing-footer {  padding: 4rem 0 2rem;  border-top: 1px solid #F3F4F6;  background: #FFFFFF;  color: #4B5563;}.footer-content-centered {    display: flex;    flex-direction: column;    align-items: center;    text-align: center;    margin-bottom: 2rem;}.footer-content-centered .logo { margin-bottom: 0.5rem; }.footer-desc {     font-size: 0.95rem;     line-height: 1.6;     color: #6B7280;     margin-bottom: 1.5rem;     max-width: 500px;     margin-left: auto;    margin-right: auto;}.social-links { display: flex; gap: 0.75rem; justify-content: center; }.social-icon {     width: 36px; height: 36px; border-radius: 50%; background: #F3F4F6; color: #4B5563;    display: flex; align-items: center; justify-content: center; transition: all 0.2s;}.social-icon:hover { background: var(--primary-color); color: white; transform: translateY(-2px); }.footer-bottom {    border-top: 1px solid #F3F4F6;    padding-top: 2rem;    text-align: center;    font-size: 0.85rem;    color: #9CA3AF;}.auth-container {  min-height: 100vh;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  padding: 1rem;  position: relative;  overflow: hidden;  background-color: #F9FAFB;  background-image:       linear-gradient(#E5E7EB 1px, transparent 1px),      linear-gradient(90deg, #E5E7EB 1px, transparent 1px);  background-size: 40px 40px;}.auth-container::before {    content: '';    position: absolute;    top: -10%; left: -10%;    width: 600px; height: 600px;    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(255,255,255,0) 70%);    border-radius: 50%;    z-index: 0;    pointer-events: none;}.auth-container::after {    content: '';    position: absolute;    bottom: -10%; right: -10%;    width: 500px; height: 500px;    background: radial-gradient(circle, rgba(236,72,153,0.1) 0%, rgba(255,255,255,0) 70%);    border-radius: 50%;    z-index: 0;    pointer-events: none;}.auth-card {  background: rgba(255, 255, 255, 0.85);  backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px);  width: 100%;  max-width: 420px;  padding: 2.5rem;  border-radius: 1.5rem;  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.05);  border: 1px solid rgba(255, 255, 255, 0.6);  z-index: 1;}.auth-header { text-align: center; margin-bottom: 1.5rem; }.auth-header h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem; color: #111827; }.auth-header p { color: #4B5563; font-size: 0.95rem; }.social-auth-wrapper {    margin-bottom: 1.5rem;    display: grid;    grid-auto-flow: column;           grid-auto-columns: max-content;     justify-content: center;}.social-btn {    width: 100%;    display: flex;    align-items: center;    justify-content: center;    gap: 0.75rem;    padding: 0.75rem;    background: white;    border: 1px solid #E5E7EB;    border-radius: 0.75rem;    color: #374151;    font-weight: 500;    font-size: 0.95rem;    transition: all 0.2s;    cursor: pointer;    box-shadow: 0 1px 2px rgba(0,0,0,0.05);}.social-btn:hover {    background: #F9FAFB;    border-color: #D1D5DB;    box-shadow: 0 2px 4px rgba(0,0,0,0.05);}.auth-divider {    display: flex;    align-items: center;    text-align: center;    margin: 1.5rem 0;    color: #9CA3AF;    font-size: 0.85rem;}.auth-divider::before, .auth-divider::after {    content: '';    flex: 1;    border-bottom: 1px solid #E5E7EB;}.auth-divider span {    padding: 0 0.75rem;}.auth-form { display: flex; flex-direction: column; gap: 0; }.form-group { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }.form-label { font-size: 0.9rem; font-weight: 600; color: #111827; }.v-input-group { position: relative; margin-bottom: 1.25rem; padding-top: 0; }.v-input, .v-textarea {  width: 100%; padding: 12px 12px; border: 1px solid #e5e7eb; border-radius: 8px;  outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: white; font-size: 0.95rem;}.v-input:focus, .v-textarea:focus { border-color: var(--primary-color); border-width: 2px; padding: 11px 11px; }.v-label {  position: absolute; left: 12px; top: 14px; background: white; padding: 0 4px;  color: #6b7280; font-size: 0.95rem; transition: all 0.2s; pointer-events: none; line-height: 1;}.v-input:focus + .v-label, .v-input:not(:placeholder-shown) + .v-label,.v-textarea:focus + .v-label, .v-textarea:not(:placeholder-shown) + .v-label {  top: 0; transform: translateY(-50%) scale(0.85); left: 10px; color: var(--primary-color); font-weight: 500;}.auth-verify-row {    display: flex; gap: 10px; margin-bottom: 1.25rem;}.auth-verify-row .v-input-group {    margin-bottom: 0; flex: 1;}.verify-code-btn {    padding: 0 1rem;    font-size: 0.9rem;    color: var(--primary-color);    border: 1px solid #E5E7EB;    border-radius: 8px;    background: white;    font-weight: 500;    transition: all 0.2s;    white-space: nowrap;    min-width: 100px;}.verify-code-btn:hover:not(:disabled) {    background: #EFF6FF; border-color: var(--primary-color);}.verify-code-btn:disabled {    color: #9CA3AF; background: #F3F4F6; cursor: not-allowed;}.auth-btn {  background-color: #111827;  color: white;  padding: 0.875rem;  border-radius: 0.75rem;  font-weight: 600;  margin-top: 0.5rem;  transition: all 0.2s;  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);  width: 100%;}.auth-btn:hover {     opacity: 0.9;     transform: translateY(-1px);    box-shadow: 0 6px 10px -1px rgba(0,0,0,0.15);}.auth-footer { margin-top: 1.5rem; text-align: center; font-size: 0.9rem; color: #4B5563; }.auth-link { color: var(--primary-color); font-weight: 600; cursor: pointer; }.auth-link:hover { text-decoration: underline; }@media (max-width: 768px) {  .hero-title { font-size: 2.5rem; }      .hero-subtitle {      font-size: 0.8rem;       line-height: 1.4;      margin-bottom: 2rem;      padding: 0 0.5rem;  }  .subtitle-highlight {      font-size: 0.7rem;       margin-top: 0.5rem;      overflow: hidden;       text-overflow: ellipsis;      display: block;      letter-spacing: -0.02em;  }  .header-login-btn {      padding: .2rem 0.6rem;      font-size: .6rem;  }  .input-group-wrapper {      width: 100%;      max-width: 100%;       padding: 4px 6px;       margin-left: 0;      margin-right: 0;  }  .input-prefix {      font-size: 0.9rem;       padding-left: 0.5rem;      padding-right: 0.25rem;  }  .main-input { font-size: 0.75rem; padding: 0; }  .cta-button { padding: 0 1rem; height: 2rem; font-size: 0.8rem; }    .header-btn{padding: 0;font-size: 0.7rem}}.module-item.dragging {    opacity: 0.5;    background: #F3F4F6;    border: 2px dashed #9CA3AF;    box-shadow: none;}.module-item.dragging > * {    opacity: 0.2;}.dragging-ghost {    position: fixed;    z-index: 10000;    pointer-events: none;    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);    background: white;    opacity: 0.95;    transform: scale(1.05) rotate(3deg) !important;    border-radius: 0.75rem;    transition: transform 0.1s ease;}body.is-dragging {    cursor: grabbing;    user-select: none;}#global-page-loader {    position: fixed; inset: 0; background: #ffffffee; z-index: 99999;    display: flex; flex-direction: column; align-items: center; justify-content: center;    transition: opacity 0.4s ease;}#global-page-loader.fade-out { opacity: 0; pointer-events: none; }.loader-spinner {    width: 40px; height: 40px; border: 3px solid #E5E7EB;    border-top-color: var(--primary-color); border-radius: 50%;    animation: spin 0.8s linear infinite; margin-bottom: 1rem;}.loader-text { color: #6B7280; font-size: 0.9rem; font-weight: 500; }.google-login-container {    text-align: center;}.google-btn {    padding: 6px 18px;    background-color: #4285f4;    color: white;    border: none;    border-radius: 6px;    cursor: pointer;    transition: background-color 0.2s;    box-shadow: 0 2px 4px rgba(0,0,0,0.1);    display: flex;    justify-content: center;    gap: 0.5rem;    font-size: 14px;    margin: auto;}.google-btn:hover:not(:disabled) {    background-color: #3367d6;}.google-btn:disabled {    background-color: #a0c4ff;    cursor: not-allowed;}.tip-text {    margin-top: 12px;    color: #666;    font-size: 14px;    line-height: 1.5;}.loading-area,.error-area {    }.loading-area {    display: flex;    align-items: center;}.loading-text {    color: #555;    font-size: 16px;}.error-text {    color: var(--warning-color);    font-size: 13px;    line-height: 1.5;    margin-top: 1rem;}.spinner {    display: inline-block;    width: 20px;    height: 20px;    margin-left: 10px;    border: 3px solid #ccc;    border-top: 3px solid #4285f4;    border-radius: 50%;    animation: spin 1s linear infinite;    vertical-align: middle;}@keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }}#google-button-container {}