*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Microsoft YaHei",Arial,sans-serif;line-height:1.6;color:#333;background:#f5f5f5;min-height:100vh}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:30px 20px 20px}
.nav-wrapper{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);position:sticky;top:0;z-index:100;margin-bottom:0}
.nav{max-width:1200px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;color:#333;font-size:20px;font-weight:500;z-index:2}
.nav-logo span{color:#4caf50;margin-right:8px}
.nav-logo strong{color:#4caf50;font-weight:500}
.nav-menu{display:flex;align-items:center;height:100%;gap:20px;list-style:none}
.nav-menu li{display:flex;align-items:center;height:100%}
.nav-menu li a{display:flex;align-items:center;height:100%;padding:0 12px;color:#666;font-size:15px;border-radius:6px;transition:all .3s}
.nav-menu li a:hover{color:#4caf50;background:#f0f0f0}
.nav-menu li a.active{color:#4caf50;font-weight:500}
.bjtime-calibration{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:30px;overflow:hidden;padding:20px}
.bjtime-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #f0f0f0}
.bjtime-logo{display:flex;align-items:center;font-size:20px;font-weight:500;color:#333}
.bjtime-logo:before{content:"🕒";margin-right:10px;font-size:24px}
.site-url{font-size:13px;color:#666}
.bjtime-title{text-align:center;margin-bottom:20px}
.bjtime-title h1{color:#4caf50;margin-bottom:8px;font-size:1.8em;font-weight:600;line-height:1.35}
.title-line1,.title-line2{display:inline}
.subtitle{color:#666;font-size:14px;margin-top:5px;letter-spacing:.5px}
.bjtime-display{background:linear-gradient(135deg,#f0f7ff,#e3eeff);border-radius:12px;padding:25px;margin:20px 0;text-align:center;box-shadow:0 8px 20px rgba(66,133,244,.15);border:1px solid rgba(66,133,244,.2);position:relative;overflow:hidden}
.bjtime-display:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,#4caf50,#2196f3)}
.bjtime-label{font-size:14px;color:#4caf50;font-weight:600;margin-bottom:15px;display:flex;align-items:center;justify-content:center}
.bjtime-label:before{content:"⏱";margin-right:10px;font-size:16px}
#bjTime{font-weight:700;color:#1a73e8;margin:10px 0;text-shadow:0 2px 4px rgba(0,0,0,.1);letter-spacing:1px;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;font-size:clamp(48px,9vw,120px);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;min-height:56px;line-height:1.2}
.bj-milliseconds{font-size:.6em;opacity:.9;font-weight:500;color:#666;display:inline-block;min-width:2.8em;text-align:left;margin-left:2px}
.next-hour-countdown{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;margin:5px auto 20px;padding:10px 20px;background:rgba(255,255,255,.5);backdrop-filter:blur(4px);border-radius:50px;width:fit-content;border:1px solid rgba(26,115,232,.2);box-shadow:0 2px 8px rgba(0,0,0,.03);font-size:15px;line-height:1.5}
.countdown-time{background:rgba(26,115,232,.06);color:#0d47a1;font-weight:700;padding:4px 16px;border-radius:30px;border:.5px solid rgba(26,115,232,.2);letter-spacing:.8px;white-space:nowrap;font-size:16px}
.hourly-status{display:inline-flex;align-items:center;gap:5px;padding:6px 18px;border-radius:40px;font-size:14px;font-weight:600;cursor:pointer;color:#2c7a4b;background:rgba(76,175,80,.08);border:.5px solid rgba(76,175,80,.2);white-space:nowrap}
.bj-date-container{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:15px 0;min-height:40px}
.bj-date-item,.bj-lunar-date,.bj-ganzhi-date{background:rgba(255,255,255,.7);padding:8px 12px;border-radius:6px;font-size:16px;box-shadow:0 2px 5px rgba(0,0,0,.05);display:flex;align-items:center;height:40px;line-height:24px}
.bj-festival-card{margin:15px auto 0;max-width:620px;background:rgba(255,255,255,.72);border:1px solid rgba(26,115,232,.15);border-radius:10px;padding:12px;color:#0d47a1}
.bj-control-icons-container,.bj-control-icons{display:flex;justify-content:center;gap:12px;margin-top:16px}
.bj-icon-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e0e0e0;border-radius:50%;cursor:pointer;font-size:18px;box-shadow:0 2px 5px rgba(0,0,0,.08)}
.bj-icon-btn:hover{color:#4caf50;border-color:#4caf50}
.bj-sound-settings{display:none;max-width:500px;margin:15px auto 0;background:rgba(255,255,255,.8);border:1px solid #e5e5e5;border-radius:8px;padding:10px;text-align:left}
.sound-setting-item{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:8px 0;border-bottom:1px solid #eee}
.sound-setting-item:last-child{border-bottom:0}
.bj-sync-info{display:flex;justify-content:center;gap:20px;color:#666;font-size:13px;margin-top:12px}
.instructions{margin-top:20px;padding:15px;background:#f8f9fa;border-radius:8px}
.instructions h3{font-size:16px;color:#4caf50;margin-bottom:10px;display:flex;align-items:center}
.instructions ul{list-style:none;padding-left:10px;font-size:13px;color:#666}
.instructions li{margin:10px 0;padding-left:20px;position:relative}
.section,.card{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:30px;overflow:hidden;padding:20px}
.section h2,.section h3{color:#333;font-size:20px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}
.tools-section{padding:20px}
.section-title{color:#333;font-size:20px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding:10px}
.tool-item{display:flex;align-items:center;padding:15px;background:#f8f8f8;border-radius:8px;color:#333;transition:all .3s;border:1px solid #e9ecef}
.tool-item:hover{background:#fff;transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.1);border-color:#4caf50}
.tool-icon{font-size:24px;margin-right:15px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.tool-info{flex:1}.tool-name{font-size:16px;font-weight:500;margin-bottom:4px}.tool-desc{font-size:13px;color:#666}
.tool-item:hover .tool-name{color:#4caf50;font-weight:600}
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}
.page-header{text-align:center;padding:30px 20px 20px}
.page-header h1{margin:0 0 12px;color:#333;font-size:clamp(24px,5vw,34px)}
.page-header p{color:#666;font-size:16px;max-width:720px;margin:0 auto}
.tool-section{max-width:860px;margin:0 auto;padding:10px 20px 24px}
.time-input-section{background:#f8f8f8;padding:20px;border-radius:8px;margin-bottom:20px;border:1px solid #eee}
.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}.tag-list span{background:#f8f8f8;border:1px solid #e9ecef;border-radius:8px;padding:8px 12px}
.info-box{background:#f8f8f8;border:1px solid #eee;border-radius:8px;padding:15px;margin:10px 0;color:#666}
.health-form{background:#fff5f8;border:2px solid #ffb6c1;border-radius:24px;padding:24px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:18px}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;color:#d45d79;margin-bottom:8px}.form-group input,.form-group select{border:2px solid #ffb6c1;border-radius:14px;padding:12px 14px}
.fullscreen-clock,.compass-clock,.pomodoro-panel,.stopwatch-panel{text-align:center;background:#f8f8f8;border:1px solid #eee;border-radius:12px;padding:24px}.compass-ring{font-size:28px;color:#4caf50;font-weight:700;margin-bottom:16px}.big-result{font-size:52px;margin-top:16px}
.simple-table{border-collapse:collapse;width:100%;margin:10px 0;background:#fff}.simple-table th,.simple-table td{border:1px solid #e5e5e5;padding:8px 10px;text-align:left}.simple-table th{background:#f8f8f8}
.calendar-widget{max-width:900px;margin:0 auto}
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.calendar-title{font-size:22px;font-weight:700;color:#2d3748}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.calendar-cell{min-height:86px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:8px;background:#fff}
.calendar-cell:nth-child(7n){border-right:0}
.calendar-head{min-height:40px;background:#f8f9fa;font-weight:700;text-align:center;color:#4a5568}
.calendar-day{font-size:18px;font-weight:700;color:#2d3748}
.calendar-lunar{font-size:12px;color:#718096;margin-top:4px}
.calendar-muted{background:#fafafa;color:#b0b0b0}
.calendar-today{background:#e8f5e9;box-shadow:inset 0 0 0 2px #4caf50}
.card-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:15px;border-bottom:1px solid #eee}
.card-header h3{font-size:17px;margin:0;padding:0;border:0}.card-content{padding:0}
.countdown-input-group{display:flex;gap:10px;flex-wrap:wrap}.form-control{border:1px solid #ddd;border-radius:6px;padding:9px 10px;background:#fff}
.btn{border:0;border-radius:6px;background:#4caf50;color:#fff;padding:9px 12px;cursor:pointer}
.health-disclaimer{margin:10px;padding:10px;background:#fff8e1;border:1px solid #ffe0a3;border-radius:6px;color:#8a5b00;font-size:13px}
.friend-links-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.friend-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px}.friend-link-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:12px;text-align:center}.friend-link-item:hover{border-color:#4caf50;color:#4caf50;background:#fff}
.footer-reminder{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:15px;margin-bottom:20px;color:#666}.domain-group{display:flex;gap:15px;flex-wrap:wrap;margin-top:8px}.alert-link{color:#4caf50}
.world-clock-section{margin:0 0 30px 0;padding:15px;background:#fff;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.world-clock-section h3{margin:0 0 10px;color:#333;font-size:1em;text-align:center;border:0;padding:0}
.world-clock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px;padding:10px}
.world-clock-item{display:block;padding:15px;background:#f8f8f8;border-radius:8px;color:#333;border:1px solid #e9ecef;transition:all .3s}
.world-clock-item:hover{background:#fff;transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.1);border-color:#4caf50}
.city-header{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px}
.flag-emoji{font-size:24px}
.time{font-size:24px;color:#1a73e8;font-weight:700;font-variant-numeric:tabular-nums}
.date{font-size:13px;color:#666;margin-top:4px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding:10px}
.tool-card{display:flex;flex-direction:column;padding:15px;background:#f8f8f8;border-radius:8px;color:#333;transition:all .3s;border:1px solid #e9ecef}
.tool-card:hover{background:#fff;transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.1);border-color:#4caf50}
.tool-card b{font-size:16px;font-weight:500;margin-bottom:4px;color:#333}
.tool-card:hover b{color:#4caf50}
.tool-card span{font-size:13px;color:#666}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
input,select,button{font:inherit}
input,select{border:1px solid #ddd;border-radius:6px;padding:9px 10px;background:#fff}
button{border:0;border-radius:6px;background:#4caf50;color:#fff;padding:10px 14px;cursor:pointer}
.result{font-weight:700;color:#4caf50}
.footer{text-align:center;color:#666;padding:20px}
.exit-fullscreen{position:fixed;right:16px;top:16px;z-index:999;width:42px;height:42px;border-radius:50%;background:#333;color:#fff}
@media(max-width:768px){
  .container{padding:20px 12px}
  .nav{height:auto;min-height:60px;flex-wrap:wrap;padding:10px 15px}
  .nav-menu{width:100%;overflow-x:auto;gap:8px;margin-top:8px}
  .nav-menu li a{height:auto;padding:8px 10px;white-space:nowrap}
  .bjtime-calibration{padding:15px}
  .bjtime-header{display:block;text-align:center}
  #bjTime{font-size:clamp(42px,14vw,72px)}
  .bj-milliseconds{font-size:.46em}
  .bj-sync-info{display:block;text-align:center}
  .tool-grid,.world-clock-grid{grid-template-columns:1fr}
  .card-row{grid-template-columns:1fr}
}