/*
Theme: timezone-china (wcbeijingtime.com)
Layout: Centered-contained, three-column time cards
Grid: Three-column card grid
Font: Noto Sans SC
*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;background:#fff5f5;color:#212121;line-height:1.7}

/* Header: Breadcrumb top bar + main row */
.header-china{position:sticky;top:0;z-index:100}
.top-bar-breadcrumb{background:#b71c1c;padding:6px 0;font-size:.78rem;color:rgba(255,255,255,.7)}
.breadcrumb-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;gap:8px}
.bc-item{color:rgba(255,255,255,.8)}
.bc-sep{opacity:.4}
.header-main-row{background:linear-gradient(135deg,#b71c1c,#d32f2f);padding:12px 0;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:12px 20px;gap:20px}
.logo-china{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.logo-cn{font-size:1.5rem}
.logo-cn-text{font-size:1.1rem;font-weight:700;letter-spacing:1px}
.nav-china{display:flex;gap:16px}
.nav-china a{color:rgba(255,255,255,.8);font-size:.88rem;padding:6px 0;border-bottom:2px solid transparent;transition:all .2s}
.nav-china a:hover{color:#ffd600;border-bottom-color:#ffd600}
.search-china-inline{display:flex;align-items:center;gap:6px}
.search-china-input{padding:8px 14px;border-radius:20px;border:none;font-size:.82rem;width:180px;background:rgba(255,255,255,.15);color:#fff;outline:none}
.search-china-input::placeholder{color:rgba(255,255,255,.5)}
.search-china-btn{background:#ffd600;color:#b71c1c;border:none;border-radius:20px;padding:8px 16px;font-size:.82rem;font-weight:700;cursor:pointer}

/* Hero: China-themed with Beijing clock */
.hero-timezone-china{background:linear-gradient(135deg,#d32f2f,#e57373,#ffcdd2);padding:50px 0;text-align:center}
.hero-china{max-width:800px;margin:0 auto;padding:0 20px}
.hero-china-badge{display:inline-block;background:rgba(255,255,255,.2);padding:4px 16px;border-radius:20px;font-size:.8rem;color:#fff;margin-bottom:16px}
.hero-title{font-size:2.2rem;font-weight:900;color:#fff;line-height:1.3;margin-bottom:15px}
.hero-subtitle{font-size:1rem;color:rgba(255,255,255,.85);margin-bottom:24px}
.hero-beijing-clock{margin:24px 0}
.bj-clock-face{display:inline-block;background:rgba(0,0,0,.2);border-radius:16px;padding:20px 40px;backdrop-filter:blur(8px)}
.bj-label{display:block;font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:6px}
.bj-time{display:block;font-size:2.8rem;font-weight:900;color:#ffd600;font-variant-numeric:tabular-nums;letter-spacing:4px}
.bj-date{display:block;font-size:.82rem;color:rgba(255,255,255,.6);margin-top:4px}
.hero-btn{padding:10px 28px;border-radius:50px;font-weight:700;font-size:.85rem;display:inline-block;margin:6px;transition:all .2s}
.hero-btn-primary{background:#ffd600;color:#b71c1c}
.hero-btn-primary:hover{background:#ffea00;transform:translateY(-2px)}
.hero-btn-outline{border:2px solid #fff;color:#fff;background:transparent}
.hero-btn-outline:hover{background:rgba(255,255,255,.15)}

/* Content: Three-column with full-width modules */
.content-china-three-col{padding:40px 20px;max-width:1200px;margin:0 auto}
.module-full-width{margin-bottom:40px}
.module-full-width h2{font-size:1.4rem;font-weight:700;color:#c62828;margin-bottom:16px;border-bottom:3px solid #c62828;padding-bottom:8px;display:inline-block}

/* Daily schedule */
.daily-schedule-grid{display:flex;flex-direction:column;gap:8px}
.match-item{display:grid;grid-template-columns:100px 1fr 1fr;gap:16px;background:#fff;padding:14px 18px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);align-items:center;border-left:4px solid #c62828}
.match-time{font-weight:700;font-size:1.1rem;color:#c62828}
.match-vs{font-weight:600;font-size:.92rem}
.match-venue{font-size:.8rem;color:#9e9e9e;text-align:right}

/* Cards: Three-column red-bordered */
.cards-grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.china-card{background:#fff;border-left:4px solid #c62828;border-radius:6px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,.06);text-align:center}
.card-title-row{font-size:.9rem;font-weight:600;margin-bottom:10px;color:#c62828}
.card-time-big{font-size:2rem;font-weight:900;color:#212121;margin:8px 0}
.card-zone{font-size:.78rem;color:#9e9e9e}

/* City compare */
.city-compare-row{display:flex;gap:16px;align-items:end;flex-wrap:wrap}
.city-input-group{flex:1;min-width:200px}
.city-input-group label{display:block;font-size:.82rem;color:#9e9e9e;margin-bottom:6px}
.city-input-group select,.city-input-group input{padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:.9rem;width:100%}
.convert-btn{background:#c62828;color:#fff;border:none;padding:12px 28px;border-radius:8px;font-weight:700;cursor:pointer}

/* Footer */
.footer-china{background:linear-gradient(135deg,#b71c1c,#d32f2f);padding:40px 0;color:rgba(255,255,255,.7)}
.footer-china-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;max-width:1200px;margin:0 auto;padding:0 20px}
.footer-china-top h4{font-size:.9rem;font-weight:700;color:#ffd600;margin-bottom:12px}
.footer-china-top a{display:block;color:rgba(255,255,255,.6);margin:6px 0;font-size:.82rem}
.footer-china-divider{height:1px;background:rgba(255,255,255,.15);margin:20px auto;max-width:1200px}
.footer-china-legal{text-align:center;font-size:.78rem;padding:0 20px;line-height:1.6}

@media(max-width:768px){
  .header-main-row{flex-direction:column;align-items:stretch}
  .nav-china{justify-content:center;flex-wrap:wrap}
  .search-china-inline{margin-top:8px;width:100%}
  .search-china-input{flex:1}
  .hero-title{font-size:1.6rem!important}
  .bj-time{font-size:2rem}
  .daily-schedule-grid .match-item{grid-template-columns:1fr;text-align:center}
  .cards-grid-3col{grid-template-columns:1fr}
  .footer-china-top{grid-template-columns:1fr}
}
/* ============================================
   ENHANCEMENTS - timezone-china beautification
   Color refinement, typography, micro-interactions,
   responsive polish
   ============================================ */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
::selection{background:#b71c1c;color:#ffd600}

/* Header polish */
.header-china{backdrop-filter:blur(0)}
.top-bar-breadcrumb{letter-spacing:.3px}
.header-main-row{padding-left:20px;padding-right:20px;border-radius:0 0 12px 12px}
.search-china-input{transition:all .3s;border:1px solid transparent}
.search-china-input:focus{background:rgba(255,255,255,.25);border-color:#ffd600;width:220px}

/* Hero refinements */
.hero-timezone-china{position:relative;overflow:hidden}
.hero-timezone-china::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(255,214,0,.08),transparent 50%)}
.hero-china-badge{backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15)}
.hero-title{letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.bj-clock-face{border:1px solid rgba(255,255,255,.15)}
.bj-time{text-shadow:0 0 20px rgba(255,214,0,.3)}
.hero-btn{letter-spacing:.3px}

/* Card refinements */
.china-card{border-radius:10px;padding:22px;transition:all .3s;border-left-width:4px}
.china-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(198,40,40,.12);border-left-color:#ffd600}
.card-time-big{font-variant-numeric:tabular-nums}

/* Match item enhancements */
.match-item{border-left-width:4px;transition:all .25s}
.match-item:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.match-time{font-variant-numeric:tabular-nums}

/* Navigation refinements */
.nav-china a{position:relative}
.nav-china a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#ffd600;transition:width .25s}
.nav-china a:hover::after{width:100%}

/* Module headings with accent line */
.module-full-width h2{position:relative;padding-left:16px}
.module-full-width h2::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#ffd600;border-radius:2px}

/* City compare refinements */
.city-input-group select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c62828' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:12px;transition:border-color .3s}
.city-input-group select:focus,.city-input-group input:focus{border-color:#c62828;outline:none;box-shadow:0 0 0 3px rgba(198,40,40,.1)}
.convert-btn{transition:all .25s;letter-spacing:.5px;text-transform:uppercase;font-size:.8rem}
.convert-btn:hover{background:#d32f2f;transform:translateY(-1px);box-shadow:0 4px 12px rgba(198,40,40,.3)}

/* Footer refinements */
.footer-china{position:relative}
.footer-china::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#b71c1c,#ffd600,#b71c1c)}
.footer-china-top a{transition:all .2s}
.footer-china-top a:hover{color:#ffd600!important;padding-left:4px}

/* Responsive refinements */
@media(max-width:768px){
  .hero-timezone-china{padding:36px 0}
  .hero-title{font-size:1.6rem!important}
  .hero-subtitle{font-size:.9rem}
  .bj-clock-face{padding:14px 24px}
  .bj-time{font-size:2rem;letter-spacing:2px}
  .city-compare-row{gap:10px}
  .city-input-group{min-width:100%}
  .match-item{grid-template-columns:1fr;text-align:center;padding:12px}
  .module-full-width h2{font-size:1.2rem}
  .footer-china{padding:28px 0}
}
@media(max-width:480px){
  .hero-title{font-size:1.3rem!important}
  .bj-time{font-size:1.6rem}
  .hero-china-badge{font-size:.7rem}
}