:root{
      --red:#b91c1c;
      --red-dark:#7f1d1d;
      --red-light:#fef2f2;
      --yellow:#f4c542;
      --yellow-light:#fff8dc;
      --green:#15803d;
      --blue:#2563eb;
      --purple:#7c3aed;
      --black:#1f2937;
      --text:#475569;
      --muted:#64748b;
      --line:#e2e8f0;
      --soft:#f8fafc;
      --white:#ffffff;
      --shadow:0 16px 45px rgba(15,23,42,.10);
      --shadow-sm:0 8px 25px rgba(15,23,42,.07);
      --radius:20px;
      --container:1240px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:"Be Vietnam Pro",sans-serif;
      color:var(--text);
      background:#f4f6f9;
      line-height:1.65;
    }
    body.no-scroll{overflow:hidden}
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    button{border:0;cursor:pointer}
    .chinese{font-family:"Noto Sans SC",sans-serif}
    .container{width:min(calc(100% - 32px),var(--container));margin:auto}

    /* Header */
    .header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }
    .header-inner{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
    .brand-logo{
      width:50px;height:50px;border-radius:15px;
      display:grid;place-items:center;
      color:white;font-weight:800;
      background:linear-gradient(135deg,var(--red),var(--red-dark));
      box-shadow:0 10px 22px rgba(185,28,28,.24);
    }
    .brand-text strong{display:block;color:var(--black);font-size:17px}
    .brand-text small{display:block;color:var(--muted);font-size:11px}
    .menu{display:flex;align-items:center;gap:4px}
    .menu a{
      padding:10px 11px;border-radius:9px;
      font-size:13px;font-weight:700;
    }
    .menu a:hover,.menu a.active{background:var(--red-light);color:var(--red)}
    .menu-toggle{
      display:none;width:42px;height:42px;border-radius:10px;background:var(--soft);
    }

    /* Hero */
    .hero{
      position:relative;
      overflow:hidden;
      min-height:520px;
      color:white;
      background:
        linear-gradient(90deg,rgba(72,8,17,.95) 0%,rgba(127,29,29,.88) 45%,rgba(127,29,29,.48) 100%),
        url("images/hsk1-vocabulary-bg.webp") center/cover no-repeat;
    }
    .hero::after{
      content:"HSK1";
      position:absolute;
      right:-15px;
      bottom:-95px;
      font-size:220px;
      font-weight:800;
      color:rgba(255,255,255,.07);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:2;
      min-height:520px;
      display:grid;
      grid-template-columns:1fr .78fr;
      align-items:center;
      gap:50px;
      padding:64px 0;
    }
    .hero-badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 14px;border-radius:999px;
      color:#291b00;background:var(--yellow);
      font-size:12px;font-weight:800;
    }
    .hero h1{
      margin-top:18px;
      max-width:760px;
      font-size:clamp(38px,6vw,66px);
      line-height:1.13;
      letter-spacing:-1.2px;
    }
    .hero h1 span{color:var(--yellow)}
    .hero p{
      max-width:680px;
      margin-top:18px;
      color:rgba(255,255,255,.82);
      font-size:16px;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .btn{
      min-height:50px;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:12px 21px;border-radius:13px;
      font-size:13px;font-weight:800;
      transition:.25s;
    }
    .btn-primary{color:var(--red-dark);background:var(--yellow)}
    .btn-light{color:white;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.11)}
    .btn:hover{transform:translateY(-3px)}
    .hero-board{
      padding:24px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:26px;
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(10px);
      box-shadow:0 24px 55px rgba(0,0,0,.22);
    }
    .hero-board-title{font-size:13px;color:rgba(255,255,255,.74)}
    .hero-word{
      margin-top:12px;
      text-align:center;
      padding:25px 15px;
      border-radius:18px;
      background:rgba(255,255,255,.94);
      color:var(--black);
    }
    .hero-word .hanzi{font-size:62px;font-weight:700;color:var(--red)}
    .hero-word .pinyin{font-weight:800;color:var(--blue)}
    .hero-word .meaning{margin-top:2px;color:var(--muted)}
    .hero-progress{margin-top:17px}
    .progress-row{display:flex;justify-content:space-between;font-size:12px}
    .progress-track{
      height:8px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;
    }
    .progress-bar{width:100%;height:100%;background:var(--yellow)}

    /* Stats */
    .stats{position:relative;z-index:5;margin-top:-34px}
    .stats-grid{
      display:grid;grid-template-columns:repeat(4,1fr);
      background:white;border-radius:20px;box-shadow:var(--shadow);
      border:1px solid var(--line);
      overflow:hidden;
    }
    .stat{padding:23px;text-align:center}
    .stat+.stat{border-left:1px solid var(--line)}
    .stat strong{display:block;color:var(--black);font-size:25px}
    .stat span{font-size:12px;color:var(--muted)}

    /* Main */
    .main-section{padding:70px 0}
    .section-title{text-align:center;max-width:780px;margin:auto}
    .section-title span{color:var(--red);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
    .section-title h2{margin-top:7px;color:var(--black);font-size:clamp(27px,4vw,41px)}
    .section-title p{margin-top:9px;color:var(--muted)}

    /* Controls */
    .controls{
      position:sticky;
      top:88px;
      z-index:50;
      margin-top:30px;
      padding:18px;
      background:rgba(255,255,255,.97);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow-sm);
    }
    .control-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) 210px 190px;
      gap:12px;
    }
    .search-box{position:relative}
    .search-box::before{
      content:"🔍";position:absolute;left:15px;top:50%;transform:translateY(-50%);
    }
    .search-input,.select{
      width:100%;min-height:48px;
      border:1px solid var(--line);border-radius:12px;background:white;outline:none;
    }
    .search-input{padding:12px 15px 12px 43px}
    .select{padding:10px 13px}
    .search-input:focus,.select:focus{
      border-color:var(--red);
      box-shadow:0 0 0 4px rgba(185,28,28,.08);
    }
    .filter-scroll{
      display:flex;gap:9px;overflow:auto;margin-top:14px;padding-bottom:4px;
      scrollbar-width:thin;
    }
    .filter-btn{
      flex:0 0 auto;
      padding:8px 14px;border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);background:white;
      font-size:11px;font-weight:800;
    }
    .filter-btn.active{color:white;background:var(--red);border-color:var(--red)}
    .result-line{
      margin-top:12px;display:flex;justify-content:space-between;gap:15px;
      color:var(--muted);font-size:12px;
    }

    /* Lesson navigation */
    .lesson-nav{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:10px;
      margin-top:28px;
    }
    .lesson-chip{
      padding:12px 8px;
      text-align:center;
      border:1px solid var(--line);
      border-radius:12px;
      background:white;
      font-size:11px;font-weight:800;
      color:var(--text);
      transition:.2s;
    }
    .lesson-chip:hover,.lesson-chip.active{
      transform:translateY(-2px);
      color:white;background:var(--red);border-color:var(--red);
    }

    /* Lesson block */
    .lesson-block{
      margin-top:34px;
      scroll-margin-top:180px;
    }
    .lesson-heading{
      display:flex;align-items:center;justify-content:space-between;gap:20px;
      margin-bottom:16px;padding:19px 21px;
      color:white;border-radius:17px;
      background:
        linear-gradient(135deg,rgba(127,29,29,.96),rgba(185,28,28,.87)),
        url("images/hsk1-vocabulary-bg.webp") center/cover no-repeat;
      box-shadow:var(--shadow-sm);
    }
    .lesson-heading-left{display:flex;align-items:center;gap:15px}
    .lesson-number{
      width:48px;height:48px;display:grid;place-items:center;
      border-radius:14px;color:var(--red-dark);background:var(--yellow);
      font-weight:800;
    }
    .lesson-heading h3{font-size:19px}
    .lesson-heading p{font-size:12px;color:rgba(255,255,255,.75)}
    .lesson-count{
      padding:6px 10px;border-radius:999px;
      color:var(--red-dark);background:white;font-size:11px;font-weight:800;
    }

    /* Word cards */
    .word-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:14px;
    }
    .word-card{
      position:relative;
      overflow:hidden;
      padding:17px;
      min-height:250px;
      background:white;
      border:1px solid var(--line);
      border-radius:17px;
      box-shadow:var(--shadow-sm);
      transition:.25s;
    }
    .word-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .word-index{
      position:absolute;right:11px;top:10px;color:#a8b0bb;font-size:10px;font-weight:800;
    }
    .word-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .word-hanzi{font-size:36px;font-weight:700;color:var(--red)}
    .word-actions{display:flex;gap:6px}
    .icon-btn{
      width:33px;height:33px;display:grid;place-items:center;border-radius:9px;
      background:var(--soft);color:var(--text);
    }
    .icon-btn.speak{color:white;background:var(--red)}
    .icon-btn.favorite.active{color:#9a6700;background:var(--yellow-light)}
    .word-pinyin{margin-top:6px;color:var(--blue);font-size:13px;font-weight:800}
    .word-meaning{margin-top:2px;color:var(--black);font-size:14px;font-weight:700}
    .word-type{
      display:inline-block;margin-top:9px;padding:4px 8px;border-radius:999px;
      color:var(--green);background:#ecfdf3;font-size:9px;font-weight:800;
    }
    .word-example{
      margin-top:12px;padding:10px;border-radius:11px;background:var(--soft);
      font-size:11px;color:var(--muted);
    }
    .word-example .cn{display:block;color:var(--black);font-size:14px;font-weight:600}
    .word-example .vi{display:block;margin-top:3px}

    /* Empty */
    .empty{
      display:none;margin-top:30px;padding:50px 20px;text-align:center;
      border-radius:18px;background:white;border:1px solid var(--line);
    }
    .empty.show{display:block}

    /* Study guide */
    .study-box{
      margin-top:55px;
      display:grid;grid-template-columns:1fr 1fr;gap:20px;
    }
    .study-card{
      padding:25px;border-radius:20px;background:white;border:1px solid var(--line);box-shadow:var(--shadow-sm);
    }
    .study-card h3{color:var(--black)}
    .study-card ul{margin-top:14px;display:grid;gap:10px;list-style:none}
    .study-card li{display:flex;gap:9px;font-size:13px}
    .study-card li::before{content:"✓";color:var(--green);font-weight:800}

    /* Modal flashcard */
    .modal{
      position:fixed;inset:0;z-index:2000;
      display:none;place-items:center;
      padding:20px;background:rgba(15,23,42,.72);
    }
    .modal.show{display:grid}
    .modal-card{
      position:relative;
      width:min(100%,520px);
      padding:28px;
      border-radius:24px;background:white;box-shadow:0 30px 90px rgba(0,0,0,.35);
      text-align:center;
    }
    .modal-close{
      position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:var(--soft);
    }
    .modal-label{color:var(--red);font-size:11px;font-weight:800}
    .modal-hanzi{margin-top:16px;font-size:82px;font-weight:700;color:var(--red)}
    .modal-pinyin{font-size:20px;font-weight:800;color:var(--blue)}
    .modal-meaning{margin-top:4px;font-size:20px;color:var(--black);font-weight:700}
    .modal-example{margin-top:20px;padding:16px;border-radius:14px;background:var(--soft)}
    .modal-example strong{display:block;font-size:20px;color:var(--black)}
    .modal-example span{display:block;margin-top:4px;color:var(--muted)}
    .modal-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}

    /* Footer */
    .footer{
      padding:55px 0 25px;color:rgba(255,255,255,.72);background:var(--black);
    }
    .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}
    .footer h3{color:white;margin-bottom:13px}
    .footer p,.footer a{font-size:12px}
    .footer a{display:block;margin-bottom:8px}
    .footer a:hover{color:var(--yellow)}
    .copyright{margin-top:35px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:11px}

    .back-top{
      position:fixed;right:20px;bottom:20px;z-index:900;
      width:45px;height:45px;display:none;place-items:center;border-radius:50%;
      color:white;background:var(--red);box-shadow:var(--shadow);
    }
    .back-top.show{display:grid}

    @media(max-width:1100px){
      .menu{
        position:fixed;left:0;right:0;top:74px;display:none;
        padding:15px;background:white;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
      }
      .menu.show{display:grid}
      .menu-toggle{display:grid}
      .hero-inner{grid-template-columns:1fr}
      .hero-board{max-width:520px}
      .word-grid{grid-template-columns:repeat(3,1fr)}
      .lesson-nav{grid-template-columns:repeat(5,1fr)}
    }
    @media(max-width:820px){
      .control-row{grid-template-columns:1fr 1fr}
      .search-box{grid-column:1/-1}
      .word-grid{grid-template-columns:repeat(2,1fr)}
      .lesson-nav{grid-template-columns:repeat(4,1fr)}
      .study-box{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:650px){
      .container{width:min(calc(100% - 20px),var(--container))}
      .hero{min-height:auto}
      .hero-inner{min-height:auto;padding:48px 0}
      .hero h1{font-size:38px}
      .hero-board{display:none}
      .stats-grid{grid-template-columns:repeat(2,1fr)}
      .stat:nth-child(3){border-left:0;border-top:1px solid var(--line)}
      .stat:nth-child(4){border-top:1px solid var(--line)}
      .controls{top:78px}
      .word-grid{grid-template-columns:1fr}
      .lesson-nav{grid-template-columns:repeat(3,1fr)}
      .lesson-heading{align-items:flex-start}
      .lesson-count{display:none}
      .footer-grid{grid-template-columns:1fr}
    }
    @media(max-width:460px){
      .brand-text small{display:none}
      .control-row{grid-template-columns:1fr}
      .search-box{grid-column:auto}
      .result-line{display:block}
      .result-line span{display:block;margin-top:4px}
      .lesson-nav{grid-template-columns:repeat(2,1fr)}
      .lesson-heading-left{align-items:flex-start}
      .lesson-heading h3{font-size:16px}
    }

    .logo-image {
            width: 2px;
            height: 2px;
            display: block;
            object-fit: contain;
            flex-shrink: 0;
        }
    .footer-logo-image {
            width: 210px;
            height: auto;
            max-width: 100%;
            border-radius: 14px;
        }

        @media (max-width: 650px) {
            .logo-image {
                width: 58px;
                height: 58px;
            }

            .footer-logo-image {
                width: 180px;
                height: auto;
            }
        }