/* ============================================
   绿龙日语俱乐部 - 全站统一样式
   （无需额外 style.css）
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

   /* ---------- 全局重置 ---------- */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   body {
       background: linear-gradient(135deg, #f8fafc 0%, #eef2f8 100%);
       font-family: 'Segoe UI', 'Noto Sans CJK JP', 'Noto Sans', 'Helvetica Neue', Roboto, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
       color: #1e2a3e;
       line-height: 1.5;
       -webkit-tap-highlight-color: transparent;
       min-height: 100vh;
   }
   
   /* ---------- Logo文字渐变 ---------- */
   .logo-text {
       background: linear-gradient(135deg, #059669 0%, #10b981 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   
   /* ---------- 通用卡片 ---------- */
   .glass-card {
       background: white;
       border-radius: 2rem;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.8);
   }
   
   .card-pop {
       transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
       border: 1px solid rgba(16, 185, 129, 0.1);
       box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.05);
       border-radius: 2rem;
       background: white;
   }
   
   .card-pop:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 30px -12px rgba(5, 150, 105, 0.2);
       border-color: rgba(16, 185, 129, 0.3);
   }
   
   /* ---------- 标签设计 ---------- */
   .tag-pill {
       padding: 4px 12px;
       border-radius: 30px;
       font-weight: 800;
       font-size: 0.75rem;
       display: inline-block;
   }
   
   .tag-pos {
       background: #e0faff;
       color: #0891b2;
       border: 1px solid #bae6fd;
   }
   
   .tag-jlpt {
       background: #f0fdf4;
       color: #15803d;
       border: 1px solid #bbf7d0;
   }
   
   .tag-freq {
       background: #fff7ed;
       color: #c2410c;
       border: 1px solid #ffedd5;
   }
   
   .pitch-accent {
       border: 2px solid #10b981;
       color: #10b981;
       border-radius: 50%;
       width: 32px;
       height: 32px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 0.9rem;
       font-weight: bold;
       background: white;
   }
   
   .member-badge {
       background: linear-gradient(135deg, #fef3c7, #fde68a);
       color: #92400e;
       font-size: 0.65rem;
       font-weight: 800;
       padding: 0.2rem 0.7rem;
       border-radius: 30px;
       display: inline-flex;
       align-items: center;
       gap: 4px;
   }
   
   .badge-icon {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       background: #ecfdf5;
       padding: 0.2rem 0.7rem;
       border-radius: 30px;
       font-size: 0.7rem;
       font-weight: 600;
   }
   
   /* ---------- 按钮 ---------- */
   .btn-gradient {
       background: linear-gradient(135deg, #059669 0%, #10b981 100%);
       transition: all 0.2s;
       border: none;
       cursor: pointer;
       color: white;
   }
   
   .btn-gradient:hover {
       transform: scale(1.02);
       box-shadow: 0 10px 20px -8px #10b981;
   }
   
   /* ---------- 导航栏 ---------- */
   .glass-nav {
       background: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(10px);
       border-bottom: 3px solid #10b981;
       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
       position: sticky;
       top: 0;
       z-index: 100;
       padding: 0.75rem 1.5rem;
   }
   
   .glass-nav .nav-container {
       max-width: 1280px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
   }
   
   @media (min-width: 1024px) {
       .glass-nav .nav-container {
           flex-direction: row;
       }
   }
   
   .nav-logo {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       flex-shrink: 0;
       transition: opacity 0.2s;
       text-decoration: none;
   }
   
   .nav-logo:hover {
       opacity: 0.85;
   }
   
 
   .dragon-gradient {
    width: 44px;
    height: 44px;
    background: white;
    border: 2px solid #10b981;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    display: inline-flex;
    font-size: 1.5rem;
    color: white;
}
.dragon-gradient:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.15);
}

   
   
   .logo-main .main {
       font-size: 1.25rem;
       font-weight: 800;
       color: #047857;
       line-height: 1.2;
   }
   
   .logo-main .sub {
       font-size: 0.6rem;
       font-weight: 700;
       color: #94a3b8;
       letter-spacing: 0.5px;
       text-transform: uppercase;
   }
   
   .nav-links {
       display: flex;
       align-items: center;
       gap: 1.5rem;
   }
   
   .nav-links a {
       font-weight: 700;
       font-size: 0.875rem;
       color: #475569;
       text-decoration: none;
       transition: color 0.2s;
   }
   
   .nav-links a:hover {
       color: #059669;
   }
   
   .btn-register {
       background: #059669;
       color: white !important;
       padding: 0.5rem 1.5rem;
       border-radius: 9999px;
       font-weight: 700;
       font-size: 0.875rem;
       box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
       transition: all 0.2s;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .btn-register:hover {
       background: #047857;
       transform: scale(1.02);
   }
   

   .hero-wave {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

   /* ---------- 语言切换栏 ---------- */
   .lang-bar {
       background: #f8fafc;
       padding: 0.75rem 2rem;
       border-bottom: 1px solid #e2e8f0;
       display: flex;
       justify-content: flex-end;
       gap: 1rem;
   }
   
   .lang-btn {
       background: none;
       border: none;
       font-weight: 600;
       cursor: pointer;
       padding: 0.25rem 0.75rem;
       border-radius: 40px;
       transition: all 0.2s;
       font-family: inherit;
       color: #4b5563;
   }
   
   .lang-btn.active {
       background: #1f3b4c;
       color: white;
   }
   
   .lang-btn:not(.active):hover {
       background: #e2e8f0;
       color: #0f172a;
   }
   
   /* ---------- 会员页面容器 ---------- */
   .container {
       max-width: 1280px;
       margin: 0 auto;
       background: white;
       border-radius: 32px;
       box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
       overflow: hidden;
   }
   
   .content {
       padding: 2rem 2rem 2.5rem;
   }
   
   /* 头部品牌区域 */
   .hero-brand {
       display: flex;
       align-items: center;
       gap: 1.25rem;
       margin-bottom: 1.5rem;
       flex-wrap: wrap;
       border-bottom: 3px solid #eef2f0;
       padding-bottom: 1.25rem;
   }
   
   .brand-logo {
       background: linear-gradient(145deg, #1e4620, #2d6a4f);
       width: 64px;
       height: 64px;
       border-radius: 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 8px 18px rgba(0, 32, 0, 0.15);
   }
   
   .brand-logo span {
       font-size: 2.5rem;
   }
   
   .title-group h1 {
       font-size: 1.9rem;
       font-weight: 800;
       background: linear-gradient(135deg, #1e3c2c, #2b5e3b);
       background-clip: text;
       -webkit-background-clip: text;
       color: transparent;
   }
   
   .title-group .sub-brand {
       font-size: 0.8rem;
       color: #5b6e5e;
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   
   .title-group .sub-brand span {
       background: #f1f5f9;
       padding: 0.2rem 0.8rem;
       border-radius: 30px;
       font-size: 0.7rem;
       font-weight: 600;
   }
   
   .subhead {
       color: #475569;
       border-left: 4px solid #3b9e6d;
       padding-left: 1rem;
       margin: 0.5rem 0 1.5rem 0;
       font-size: 0.95rem;
       line-height: 1.6;
   }
   
   /* 区块样式 */
   .section {
       margin-bottom: 2.5rem;
   }
   
   .section-title {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 1.2rem;
       padding-bottom: 0.5rem;
       border-bottom: 2px solid #e9edf2;
       display: flex;
       gap: 0.75rem;
       flex-wrap: wrap;
   }
   
   .intro-card {
       background: #eef7f1;
       padding: 1.25rem 1.5rem;
       border-radius: 24px;
       margin-bottom: 1.8rem;
       border: 1px solid #cde4d4;
   }
   
   /* 会员表格 */
   .price-table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       background: #fff;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
       margin: 1rem 0;
   }
   
   .price-table th,
   .price-table td {
       padding: 1rem;
       text-align: left;
       vertical-align: top;
       border-bottom: 1px solid #eef2f6;
   }
   
   .price-table th {
       background: #f9fafb;
       font-weight: 700;
       color: #1e3a3a;
   }
   
   .price-table tr:last-child td {
       border-bottom: none;
   }
   
   .price {
       font-weight: 800;
       color: #1f6e43;
       white-space: nowrap;
   }
   
   /* 规则列表 */
   .rule-list {
       list-style: none;
       padding-left: 0;
   }
   
   .rule-list li {
       margin-bottom: 0.8rem;
       padding-left: 1.5rem;
       position: relative;
   }
   
   .rule-list li::before {
       content: "🐉";
       position: absolute;
       left: 0;
       top: -0.05rem;
   }
   
   /* 警告框 */
   .warning {
       background: #fffbeb;
       border-left: 4px solid #f59e0b;
       padding: 1rem 1.2rem;
       border-radius: 16px;
   }
   
   /* 翻译结果卡片 */
   .translate-box {
       background: white;
       padding: 2rem;
       border-radius: 2rem;
       text-align: center;
       border: 1px solid rgba(16, 185, 129, 0.15);
   }
   
   .result {
       margin-top: 1.5rem;
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }
   
   .result div {
       background: #f8fafc;
       padding: 1.25rem;
       border-radius: 1.25rem;
       flex: 1;
       min-width: 140px;
       border: 1px solid #e2e8f0;
   }
   
   .result div strong {
       display: block;
       margin-bottom: 0.75rem;
       color: #1f6e43;
   }
   
   /* 列表项 */
   .list-item {
       transition: all 0.2s;
       cursor: pointer;
       border: 2px solid transparent;
   }
   
   .list-item.active {
       border-color: #10b981 !important;
       background: #f0fdf4 !important;
   }
   
   /* 动画 */
   .animate-in {
       animation: fadeIn 0.4s ease-out;
   }
   
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* 页脚 */
   footer {
       background: #f9fafb;
       padding: 1.2rem 2rem;
       font-size: 0.75rem;
       color: #6c757d;
       text-align: center;
       border-top: 1px solid #eef2f8;
   }
   
   /* 响应式 */
   @media (max-width: 700px) {
       .content {
           padding: 1.2rem;
       }
       
       .price-table th,
       .price-table td {
           padding: 0.7rem;
           font-size: 0.85rem;
       }
       
       .section-title {
           font-size: 1.25rem;
       }
       
       .hero-brand {
           flex-direction: column;
           align-items: flex-start;
       }
       
       .title-group h1 {
           font-size: 1.5rem;
       }
       
       .glass-nav {
           padding: 0.75rem 1rem;
       }
       
       .nav-links {
           gap: 1rem;
       }
       
       .btn-register {
           padding: 0.4rem 1rem;
           font-size: 0.75rem;
       }
       
       .lang-bar {
           padding: 0.5rem 1rem;
       }
       
       .translate-box {
           padding: 1.25rem;
       }
       
       .result div {
           padding: 0.85rem;
       }
   }
   
   /* 工具类 */
   .text-emerald {
       color: #059669;
   }
   
   .cursor-pointer {
       cursor: pointer;
   }