/* ===== Daily Word - Standalone Site ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#4f46e5;--primary-light:#7c3aed;
  --pink:#ec4899;--pink-light:#f472b6;
  --bg:#f6f8fe;--card:#fff;
  --text:#1a1a2e;--text-muted:#666;
  --border:#e8eaf5;
  --radius:20px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(160deg,#fce7f3 0%,#e0e7ff 50%,#f6f8fe 100%);
  padding:60px 24px 56px;text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;
  border-radius:50%;background:rgba(236,72,153,0.08);
}
.hero::after{
  content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;
  border-radius:50%;background:rgba(99,102,241,0.08);
}
.hero-inner{position:relative;z-index:1;max-width:600px;margin:0 auto}
.hero-logo{
  width:72px;height:72px;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:900;color:#fff;font-style:italic;
  box-shadow:0 12px 32px rgba(236,72,153,0.35);
}
.hero h1{
  font-size:42px;font-weight:900;letter-spacing:-1.5px;margin-bottom:10px;
  background:linear-gradient(135deg,#1a1a2e,#4f46e5);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:15px;color:var(--text-muted);margin-bottom:32px}
.hero-stats{
  display:flex;justify-content:center;align-items:center;gap:28px;
  background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);
  border-radius:20px;padding:20px 32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  display:inline-flex;
}
.hero-stat{text-align:center}
.hero-num{
  font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--primary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-label{font-size:12px;color:var(--text-muted);margin-top:2px}
.hero-divider{width:1px;height:36px;background:var(--border)}

/* ===== Container ===== */
.container{max-width:880px;margin:0 auto;padding:36px 24px 60px}

/* ===== Level Tabs ===== */
.level-tabs{
  display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap;
}
.level-tab{
  padding:10px 24px;border-radius:24px;font-size:14px;font-weight:600;
  cursor:pointer;border:2px solid var(--border);background:#fff;color:#666;
  transition:all .2s;user-select:none;
}
.level-tab.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(236,72,153,0.35);
}
.level-tab:hover:not(.active){border-color:#fbcfe8;color:var(--pink)}
.level-tab .count{font-size:11px;opacity:.7;margin-left:4px}

/* ===== Sub level tags ===== */
.sub-levels{
  display:none;gap:6px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;
}
.sub-levels.show{display:flex}
.sub-tag{
  padding:5px 16px;border-radius:14px;font-size:12px;
  background:#fdf2f8;color:#666;cursor:pointer;transition:all .15s;
  border:1px solid transparent;
}
.sub-tag:hover{background:#fce7f3;color:var(--pink)}
.sub-tag.active{background:linear-gradient(135deg,var(--pink),var(--pink-light));color:#fff}

/* ===== Search Box ===== */
.search-box{
  max-width:480px;margin:0 auto 20px;position:relative;
}
.search-box input{
  width:100%;padding:13px 20px 13px 46px;border-radius:26px;
  border:2px solid var(--border);font-size:14px;outline:none;
  transition:all .2s;background:#fff;
}
.search-box input:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(236,72,153,0.1)}
.search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#bbb;width:18px;height:18px;
}

/* ===== Search Results ===== */
.search-results{
  max-width:480px;margin:0 auto 20px;background:#fff;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  max-height:320px;overflow-y:auto;
}
.search-result-item{
  display:flex;align-items:center;padding:12px 16px;
  border-bottom:1px solid #f0f2f8;cursor:pointer;transition:background .15s;
  text-decoration:none;color:inherit;
}
.search-result-item:hover{background:#fdf2f8}
.search-result-item:last-child{border-bottom:none}
.sr-word{font-size:16px;font-weight:700;min-width:100px}
.sr-phonetic{font-size:12px;color:#999;font-family:serif;margin:0 12px}
.sr-meaning{font-size:13px;color:var(--text-muted);flex:1}

/* ===== Progress Bar ===== */
.progress-wrap{
  max-width:480px;margin:0 auto 28px;display:flex;align-items:center;gap:10px;
}
.progress-bar{
  flex:1;height:8px;background:#fce7f3;border-radius:4px;overflow:hidden;
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--pink),var(--pink-light));
  border-radius:4px;transition:width .4s ease;
}
.progress-text{font-size:12px;color:var(--text-muted);font-weight:600;min-width:36px}

/* ===== Word Card ===== */
.word-card{
  border-radius:28px;padding:36px 32px;text-align:center;
  transition:background .6s,color .6s;line-height:1.7;
  margin-bottom:28px;box-shadow:0 16px 48px rgba(0,0,0,0.08);
  position:relative;overflow:hidden;
  min-height:380px;
  display:flex;flex-direction:column;justify-content:center;
}
.word-main{font-size:56px;font-weight:900;margin-bottom:8px;letter-spacing:-2px}
.word-phonetic{font-size:20px;opacity:.75;margin-bottom:16px;font-family:"Georgia",serif}
.word-pos{
  display:inline-block;padding:3px 14px;border-radius:10px;
  font-size:12px;background:rgba(0,0,0,0.08);margin:0 4px 16px;
}
.word-meaning{font-size:24px;font-weight:700;margin-bottom:8px}
.word-sub{font-size:15px;opacity:.8;margin-bottom:24px}
.word-sections{max-width:560px;margin:0 auto}
.word-section{
  margin:12px 0;text-align:left;
  background:rgba(255,255,255,0.4);border-radius:16px;padding:16px 20px;
  backdrop-filter:blur(4px);
}
.word-section .label{
  font-size:11px;font-weight:700;opacity:.55;margin-bottom:6px;
  text-transform:uppercase;letter-spacing:1.5px;
}
.word-section .content{font-size:15px;line-height:1.75}
.word-section .content .en{font-style:italic;opacity:.9}
.word-section .content .cn{margin-top:4px;opacity:.85}

/* ===== Start Learning Button ===== */
.hero-cta{margin-top:28px}
.btn-start{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 56px;border:none;border-radius:40px;
  font-size:18px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  box-shadow:0 8px 30px rgba(236,72,153,0.45),0 0 0 6px rgba(255,255,255,0.3);
  transition:all .2s;letter-spacing:1px;
}
.btn-start:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 40px rgba(236,72,153,0.55),0 0 0 8px rgba(255,255,255,0.4);
}
.btn-start:active{transform:scale(0.97)}

/* ===== Action Buttons ===== */
.action-row{
  display:flex;gap:14px;justify-content:center;margin-bottom:36px;flex-wrap:wrap;
}
.btn{
  padding:16px 40px;border:none;border-radius:32px;
  font-size:16px;font-weight:700;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-pink{
  background:linear-gradient(135deg,var(--pink),var(--pink-light));color:#fff;
  box-shadow:0 6px 20px rgba(236,72,153,0.4);
}
.btn-pink:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(236,72,153,0.5)}
.btn-pink:active{transform:scale(0.97)}
.btn-outline{
  background:#fff;color:var(--pink);
  border:2px solid var(--pink);box-shadow:0 4px 14px rgba(236,72,153,0.12);
}
.btn-outline:hover{background:#fdf2f8;box-shadow:0 6px 20px rgba(236,72,153,0.2)}
.btn-outline:active{transform:scale(0.97)}

/* ===== Word List (search results) ===== */
.word-list{
  max-width:680px;margin:0 auto;display:none;
}
.word-list.show{display:block}
.word-list h3{font-size:14px;font-weight:700;margin:20px 0 12px;color:var(--text-muted)}
.word-item{
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  margin-bottom:8px;cursor:pointer;transition:all .15s;
}
.word-item:hover{border-color:var(--pink);box-shadow:0 4px 12px rgba(236,72,153,0.1)}
.word-item .w{font-size:18px;font-weight:700;min-width:120px}
.word-item .p{font-size:13px;color:#999;font-family:serif}
.word-item .m{font-size:14px;color:var(--text-muted);flex:1}

/* ===== Category Navigation ===== */
.cat-nav-section{
  margin:32px 0;
}
.cat-nav-section h3{
  font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text);
  text-align:center;
}
.cat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(max-width:600px){.cat-grid{grid-template-columns:1fr}}
.cat-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:20px;transition:all .2s;cursor:pointer;
  text-decoration:none;color:inherit;display:block;
}
.cat-card:hover{
  border-color:var(--pink);box-shadow:0 6px 20px rgba(236,72,153,0.12);
  transform:translateY(-2px);text-decoration:none;
}
.cat-icon{font-size:28px;margin-bottom:8px}
.cat-name{font-size:16px;font-weight:700;margin-bottom:4px}
.cat-desc{font-size:12px;color:var(--text-muted);line-height:1.4}

/* ===== Footer ===== */
.footer{
  text-align:center;padding:24px;font-size:12px;color:#aaa;
  border-top:1px solid var(--border);margin-top:20px;
}

/* ===== Hot Words Section ===== */
.hot-words-section{
  margin:32px 0;padding:24px;
  background:linear-gradient(135deg,#fce7f3,#e0e7ff);
  border-radius:20px;
}
.hot-words-section h3{
  font-size:16px;font-weight:700;margin-bottom:16px;text-align:center;
}
.hot-words-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media(max-width:640px){.hot-words-grid{grid-template-columns:repeat(2,1fr)}}
.hot-word{
  background:rgba(255,255,255,0.8);border-radius:12px;
  padding:14px;text-align:center;transition:all .2s;
  text-decoration:none;color:inherit;display:block;
}
.hot-word:hover{
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.1);
  text-decoration:none;
}
.hot-word .hw{font-size:18px;font-weight:700;margin-bottom:4px}
.hot-word .hm{font-size:12px;color:var(--text-muted)}

/* ===== CET Section ===== */
.cet-section{
  margin:32px 0;
}
.cet-section h3{
  font-size:16px;font-weight:700;margin-bottom:16px;text-align:center;
}
.cet-buttons{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
@media(max-width:640px){.cet-buttons{grid-template-columns:1fr}}
.cet-btn{
  border-radius:16px;padding:24px;text-align:center;
  text-decoration:none;color:inherit;transition:all .2s;
  display:block;
}
.cet-btn:hover{
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12);
  text-decoration:none;
}
.cet4{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
}
.cet6{
  background:linear-gradient(135deg,#fce7f3,#fbcfe8);
}
.cet-title{font-size:20px;font-weight:800;margin-bottom:6px}
.cet-desc{font-size:13px;color:var(--text-muted)}

/* ===== Responsive ===== */
@media(max-width:640px){
  .hero{padding:40px 16px 36px}
  .hero h1{font-size:30px}
  .hero-stats{gap:16px;padding:16px 20px}
  .hero-num{font-size:22px}
  .hero-divider{height:28px}
  .word-card{padding:36px 20px}
  .word-main{font-size:40px}
  .word-phonetic{font-size:16px}
  .word-meaning{font-size:19px}
  .container{padding:24px 16px 40px}
  .level-tab{padding:8px 16px;font-size:13px}
  .word-item .w{min-width:80px;font-size:15px}
  .btn{padding:14px 24px;font-size:15px}
}