/* ============================================================
   北京时间网 hahayun.cn - 全站统一样式表
   设计：完全模仿 biobirui.com
   主色：深森林绿 #2f7d47（biobirui 同款）
   文件：/hahayun.css
   ============================================================ */
:root{
--hy-green:#2f7d47;
--hy-green-deep:#1f5a34;
--hy-green-dark:#173f24;
--hy-green-soft:#e8f3ec;
--hy-green-bg:#f0f7f3;
--hy-link:#2f7d47;
--hy-link-hover:#1f5a34;
--hy-text:#1a1a1a;
--hy-sub:#444;
--hy-muted:#888;
--hy-border:#e0e0e0;
--hy-border-light:#eee;
--hy-bg-soft:#fafafa;
--hy-th-bg:#f0f0f0;
--hy-th-text:#333;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;}
html{scroll-behavior:smooth;}
body{background:#fff;color:var(--hy-text);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.container{max-width:960px;margin:0 auto;padding:0 16px;}
a{color:var(--hy-link);text-decoration:none;}
a:hover{color:var(--hy-link-hover);text-decoration:underline;}
img{max-width:100%;}

/* ============ 顶部导航（biobirui 深绿色） ============ */
.hy-nav{background:var(--hy-green);}
.hy-nav-inner{max-width:960px;margin:0 auto;padding:0 16px;height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.hy-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;}
.hy-brand:hover{color:#fff;text-decoration:none;}
.hy-brand-dot{width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--hy-green);flex:none;}
.hy-nav-links{display:flex;align-items:center;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hy-nav-links::-webkit-scrollbar{display:none;}
.hy-nav-links a{flex:none;padding:6px 14px;font-size:13px;color:rgba(255,255,255,.92);text-decoration:none;white-space:nowrap;}
.hy-nav-links a:hover{color:#fff;background:rgba(255,255,255,.15);text-decoration:none;}
.hy-nav-links a.on{color:#fff;background:rgba(255,255,255,.25);font-weight:600;}

/* ============ 顶部多城市时钟栏（一行12个，带圆角边框） ============ */
.hy-top-cities{background:#fff;border-bottom:1px solid var(--hy-border);padding:16px 0 18px;}
.hy-top-cities-inner{max-width:960px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hy-top-cities-inner::-webkit-scrollbar{display:none;}
.hy-top-city{flex:none;text-align:center;text-decoration:none;color:inherit;width:auto;padding:8px 8px 6px;background:#fff;border:1px solid var(--hy-border);border-radius:6px;transition:border-color .2s,background .2s;}
.hy-top-city:hover{border-color:var(--hy-green);background:var(--hy-green-bg);text-decoration:none;}
.hy-top-city.active{border-color:var(--hy-green);background:var(--green-bg);}
.hy-top-city-name{font-size:13px;font-weight:700;color:var(--hy-text);margin-bottom:2px;white-space:nowrap;}
.hy-top-city.active .hy-top-city-name{color:var(--hy-green);}
.hy-top-city-date{font-size:9px;color:var(--hy-muted);margin-bottom:4px;white-space:nowrap;line-height:1.2;}
.hy-top-city-time{display:flex;justify-content:center;align-items:center;gap:2px;font-size:0;}
.hy-top-city-time .time-box{background:#1a1a1a;color:#fff;font-family:'SF Mono','Consolas','Monaco',monospace;font-weight:700;font-size:13px;letter-spacing:0;padding:3px 4px;border-radius:2px;line-height:1;min-width:26px;text-align:center;}
.hy-top-city-time .time-colon{color:#1a1a1a;font-size:12px;font-weight:700;padding:0 1px;}
.hy-top-city:hover .time-box{background:var(--hy-green);}

/* ============ 面包屑 ============ */
.hy-breadcrumb{padding:16px 0 6px;font-size:13px;color:var(--hy-muted);}
.hy-breadcrumb a{color:var(--hy-green);}
.hy-breadcrumb a:hover{text-decoration:underline;}
.hy-breadcrumb span{margin:0 6px;color:var(--hy-muted);}
.hy-breadcrumb em{font-style:normal;color:var(--hy-text);font-weight:600;}

/* ============ 城市页大时间区（纯黑数字无框，仿 biobirui） ============ */
.city-main{padding:4px 0 8px;text-align:center;}
.city-h2{font-size:22px;font-weight:600;color:var(--hy-text);margin-bottom:16px;line-height:1.4;}
.city-h2 .flag{color:var(--hy-green);}
.city-date-big{font-size:17px;color:var(--hy-text);margin-bottom:4px;font-weight:500;}
.city-date-big .weekday{margin-left:4px;color:var(--hy-sub);}
.city-time-big{font-size:72px;font-weight:700;color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;letter-spacing:2px;margin-bottom:18px;line-height:1;cursor:pointer;}
.city-time-big:hover{color:var(--hy-green);}
.city-time-big .ms{font-size:28px;font-weight:400;color:var(--hy-muted);}
.city-actions{margin:0 0 24px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.city-actions button{padding:7px 14px;background:#fff;border:1px solid var(--hy-border);border-radius:3px;color:var(--hy-sub);font-size:13px;cursor:pointer;}
.city-actions button:hover{background:var(--hy-green);border-color:var(--hy-green);color:#fff;}

/* ============ biobirui 风格信息表（浅灰表头非深蓝） ============ */
.info-table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14px;}
.info-table th{background:var(--hy-th-bg);color:var(--hy-th-text);padding:12px 16px;border:1px solid var(--hy-border);text-align:left;font-weight:600;width:32%;}
.info-table td{background:#fff;padding:12px 16px;border:1px solid var(--hy-border);color:var(--hy-text);}
.info-table td .mono{font-family:'SF Mono','Consolas','Monaco',monospace;color:var(--hy-green);font-weight:600;}

/* ============ 首页大标题（biobirui 居中大字） ============ */
.hy-home-title{text-align:center;font-size:28px;font-weight:700;color:var(--hy-text);margin:36px 0 10px;line-height:1.4;}
.hy-home-sub{text-align:center;font-size:15px;color:var(--hy-sub);margin-bottom:30px;}

/* ============ 首页3个功能卡片（biobirui 风格） ============ */
.hy-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;}
.hy-feature{padding:24px 20px;text-align:center;}
.hy-feature-ico{font-size:36px;margin-bottom:12px;color:var(--hy-green);}
.hy-feature h3{font-size:17px;font-weight:700;color:var(--hy-text);margin-bottom:10px;line-height:1.4;}
.hy-feature p{font-size:13px;color:var(--hy-sub);line-height:1.8;}

/* ============ 关键信息条 ============ */
.hy-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px;}
.hy-fact{background:var(--hy-bg-soft);border:1px solid var(--hy-border-light);border-radius:4px;padding:12px 14px;}
.hy-fact-k{font-size:12px;color:var(--hy-muted);margin-bottom:3px;}
.hy-fact-v{font-size:15px;font-weight:700;color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;word-break:break-all;}

/* ============ 通用 H2/H3 标题 ============ */
.hy-section-title{font-size:22px;font-weight:700;color:var(--hy-text);margin:32px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--hy-green);}
.hy-section-title .ico{margin-right:6px;}
.hy-sub-title{font-size:16px;font-weight:600;color:var(--hy-text);margin:20px 0 10px;}

/* ============ 设备对比卡片 ============ */
.time-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px;}
.time-card{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:20px;}
.time-card.local{border-top:3px solid var(--hy-green);}
.time-card.warning{border-top:3px solid #e67e22;}
.time-card.error{border-top:3px solid #c0392b;}
.card-icon{font-size:26px;margin-bottom:8px;}
.card-title{font-size:13px;color:var(--hy-sub);margin-bottom:6px;}
.card-value{font-size:22px;color:var(--hy-text);font-weight:700;margin-bottom:4px;font-family:'SF Mono','Consolas','Monaco',monospace;}
.card-sub{font-size:12px;color:var(--hy-muted);}
.status-badge{display:inline-block;padding:3px 10px;border-radius:3px;font-size:12px;font-weight:600;margin-top:6px;}
.status-badge.sync{background:#d4edda;color:var(--hy-green);}
.status-badge.warning{background:#fff3cd;color:#e67e22;}
.status-badge.error{background:#f8d7da;color:#c0392b;}

/* ============ 实用工具区 ============ */
.hy-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px;}
.hy-tool-card{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:20px;}
.hy-tool-card h3{font-size:15px;color:var(--hy-text);margin-bottom:8px;font-weight:700;}
.hy-tool-card>p{font-size:12px;color:var(--hy-muted);margin-bottom:12px;}
.hy-tool-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.hy-tool-row select,.hy-tool-row input{flex:1;min-width:110px;padding:8px 10px;border:1px solid var(--hy-border);border-radius:3px;font-size:13px;color:var(--hy-text);background:#fff;outline:none;}
.hy-tool-row select:focus,.hy-tool-row input:focus{border-color:var(--hy-green);box-shadow:0 0 0 2px var(--hy-green-soft);}
.hy-arrow{color:var(--hy-green);font-weight:700;}
.hy-btn{padding:8px 16px;background:var(--hy-green);color:#fff;border:none;border-radius:3px;font-size:13px;font-weight:600;cursor:pointer;}
.hy-btn:hover{background:var(--hy-green-deep);}
.hy-conv-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 10px;}
.hy-conv-item{background:var(--hy-bg-soft);border:1px solid var(--hy-border-light);border-radius:3px;padding:12px;text-align:center;}
.hy-conv-item span{display:block;font-size:20px;font-weight:700;color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;}
.hy-conv-item small{font-size:11px;color:var(--hy-sub);}
.hy-conv-diff{font-size:12px;color:var(--hy-green-deep);background:var(--hy-green-soft);border-radius:3px;padding:8px 10px;text-align:center;font-weight:600;}
.hy-ts-now{font-size:12px;color:var(--hy-sub);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hy-ts-now b{color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;}
.hy-tool-result{font-size:13px;color:var(--hy-text);background:var(--hy-bg-soft);border:1px solid var(--hy-border-light);border-radius:3px;padding:10px;line-height:1.8;min-height:40px;word-break:break-all;}
.copy-btn{padding:4px 10px;background:var(--hy-green);color:#fff;border:none;border-radius:3px;font-size:11px;cursor:pointer;}
.copy-btn:hover{background:var(--hy-green-deep);}

/* ============ 世界时钟墙 ============ */
.hy-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.hy-wall-card{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:16px 10px;text-align:center;text-decoration:none;}
.hy-wall-card:hover{background:var(--hy-green-bg);text-decoration:none;border-color:var(--hy-green);}
.hy-wall-city{font-size:14px;font-weight:700;color:var(--hy-text);margin-bottom:4px;}
.hy-wall-date{font-size:11px;color:var(--hy-muted);margin-bottom:4px;}
.hy-wall-time{font-size:22px;font-weight:700;color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;}
.hy-wall-tz{font-size:10px;color:var(--hy-muted);margin-top:3px;display:inline-block;}

/* ============ 全球城市时间网格 ============ */
.world-time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.world-time-card{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:16px 8px;text-align:center;}
.world-time-card:hover{background:var(--hy-bg-soft);}
.world-city{font-size:13px;color:var(--hy-sub);margin-bottom:6px;font-weight:500;}
.world-time{font-size:20px;font-weight:700;color:var(--hy-text);font-family:'SF Mono','Consolas','Monaco',monospace;}
.world-time.hy-prev-time{color:#e67e22;}
.world-time.hy-next-time{color:var(--hy-green);}
.world-date{font-size:11px;color:var(--hy-muted);margin-top:5px;}
.world-date.hy-prev-date{color:#e67e22;font-weight:700;}
.world-date.hy-next-date{color:var(--hy-green);font-weight:700;}
.world-tz{font-size:10px;color:var(--hy-muted);margin-top:3px;display:inline-block;}

/* ============ 详细参数表 ============ */
.detail-table{width:100%;border-collapse:collapse;background:#fff;margin-bottom:26px;font-size:14px;}
.detail-table th{background:var(--hy-th-bg);color:var(--hy-th-text);padding:12px 16px;text-align:left;font-weight:600;border:1px solid var(--hy-border);}
.detail-table td{padding:12px 16px;border:1px solid var(--hy-border);color:var(--hy-text);}
.detail-table tr:hover td{background:var(--hy-bg-soft);}
.detail-table .label{color:var(--hy-sub);width:32%;font-weight:500;}
.detail-table .value{font-family:'SF Mono','Consolas','Monaco',monospace;color:var(--hy-green);font-weight:600;}

/* ============ 科普内容 ============ */
.what-is-time{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:24px;margin-bottom:26px;}
.what-is-time h2{color:var(--hy-text);font-size:18px;margin-bottom:14px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--hy-green);}
.what-is-time p{color:var(--hy-sub);font-size:14px;line-height:1.9;margin-bottom:12px;text-align:justify;}
.what-is-time h3{color:var(--hy-text);font-size:15px;margin:18px 0 10px;font-weight:600;}
.what-is-time ul{margin-left:20px;color:var(--hy-sub);font-size:14px;line-height:2;}
.what-is-time li{margin:4px 0;}

/* ============ FAQ ============ */
.hy-faq{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:24px;margin-bottom:26px;}
.hy-faq h2{font-size:18px;font-weight:700;color:var(--hy-text);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--hy-green);}
.hy-faq-item{border:1px solid var(--hy-border-light);border-radius:3px;margin-bottom:8px;background:#fff;overflow:hidden;}
.hy-faq-item summary{padding:12px 16px;font-size:14px;font-weight:600;color:var(--hy-text);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--hy-bg-soft);}
.hy-faq-item summary::-webkit-details-marker{display:none;}
.hy-faq-item summary::after{content:"+";font-size:16px;color:var(--hy-green);flex:none;transition:transform .2s;}
.hy-faq-item[open] summary::after{transform:rotate(45deg);}
.hy-faq-a{padding:0 16px 14px;font-size:13px;color:var(--hy-sub);line-height:1.9;}

/* ============ 使用提示 ============ */
.tips-section{background:var(--hy-green-bg);border:1px solid var(--hy-green-soft);border-radius:4px;padding:20px;margin-bottom:26px;}
.tips-section h4{color:var(--hy-green-dark);font-size:15px;margin-bottom:10px;font-weight:700;}
.tips-section ul{margin-left:18px;color:var(--hy-sub);font-size:13px;line-height:1.9;}
.tips-section li{margin:4px 0;}

/* ============ 热门地区导航 ============ */
.hy-regions{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:24px;margin-bottom:26px;}
.hy-regions h2{font-size:19px;font-weight:700;color:var(--hy-text);margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--hy-green);}
.hy-regions .hy-regions-sub{font-size:12px;color:var(--hy-muted);margin:0 0 16px;padding:0 2px;}
.hy-region-group{margin-bottom:14px;}
.hy-region-group:last-child{margin-bottom:0;}
.hy-region-group h4{font-size:13px;color:var(--hy-text);margin-bottom:8px;font-weight:700;padding-left:10px;border-left:3px solid var(--hy-green);}
.hy-region-list{display:flex;flex-wrap:wrap;gap:6px;line-height:2;}
.hy-region-list a{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:#fff;border:1px solid var(--hy-border);border-radius:3px;color:var(--hy-green);text-decoration:none;font-size:13px;font-weight:500;}
.hy-region-list a:hover{background:var(--hy-green);border-color:var(--hy-green);color:#fff;text-decoration:none;}
.hy-region-list a span{font-size:10px;color:var(--hy-muted);background:var(--hy-bg-soft);padding:1px 5px;border-radius:2px;}
.hy-region-list a:hover span{background:rgba(255,255,255,0.2);color:#fff;}

/* ============ 友情链接 ============ */
.links-section{background:#fff;border:1px solid var(--hy-border);border-radius:4px;padding:24px;margin-bottom:26px;}
.links-section h3{font-size:16px;color:var(--hy-text);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--hy-green);font-weight:700;}
.links-list{display:flex;flex-wrap:wrap;gap:8px;line-height:2;}
.links-list a{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;background:#fff;border:1px solid var(--hy-border);border-radius:3px;color:var(--hy-green);text-decoration:none;font-size:13px;font-weight:500;}
.links-list a:hover{background:var(--hy-green);border-color:var(--hy-green);color:#fff;text-decoration:none;}
.links-list a span{font-size:11px;color:var(--hy-muted);background:var(--hy-bg-soft);padding:1px 5px;border-radius:2px;}
.links-list a:hover span{background:rgba(255,255,255,0.2);color:#fff;}

/* ============ 刷新按钮 ============ */
.refresh-btn{display:block;width:100%;padding:14px;background:var(--hy-green);color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:26px;}
.refresh-btn:hover{background:var(--hy-green-deep);}
.refresh-btn::before{content:"🔄";margin-right:6px;}

/* ============ 底部 ============ */
.footer{background:var(--hy-green-dark);padding:24px 0;margin-top:10px;}
.footer-content{max-width:960px;margin:0 auto;padding:0 16px;text-align:center;}
.footer-info{color:rgba(255,255,255,.8);font-size:12px;line-height:1.9;}
.footer-info a{color:#fff;margin:0 8px;}
.footer-info a:hover{text-decoration:underline;}

/* ============ 返回顶部 ============ */
.hy-back-top{position:fixed;right:22px;bottom:28px;width:42px;height:42px;background:var(--hy-green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;background .2s;z-index:9999;border:none;outline:none;}
.hy-back-top.visible{opacity:1;visibility:visible;}
.hy-back-top:hover{background:var(--hy-green-deep);}

/* ============ 响应式 ============ */
@media(max-width:900px){
.hy-top-cities-inner{grid-template-columns:repeat(3,1fr);gap:14px;}
.hy-tools{grid-template-columns:1fr;}
.hy-wall{grid-template-columns:repeat(2,1fr);}
.world-time-grid{grid-template-columns:repeat(3,1fr);}
.hy-features{grid-template-columns:1fr;gap:12px;}
}
@media(max-width:768px){
.container{padding:0 12px;}
.hy-nav-inner{height:50px;}
.hy-brand{font-size:16px;}
.city-time-big{font-size:48px;}
.city-time-big .ms{font-size:20px;}
.city-h2{font-size:19px;}
.city-date-big{font-size:16px;}
.hy-home-title{font-size:22px;margin:24px 0 8px;}
.hy-facts{grid-template-columns:repeat(2,1fr);gap:10px;}
.time-grid{grid-template-columns:1fr;}
.world-time-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
.what-is-time,.hy-faq,.hy-regions,.links-section,.tips-section{padding:18px;}
.detail-table td,.detail-table th,.info-table th,.info-table td{padding:9px 11px;font-size:13px;}
.hy-nav-links{gap:0;}
.hy-nav-links a{padding:6px 10px;font-size:12px;}
.hy-top-cities-inner{gap:6px;}
.hy-top-city{padding:6px 5px 4px;}
.hy-top-city-name{font-size:11px;}
.hy-top-city-date{font-size:8px;}
.hy-top-city-time .time-box{font-size:11px;padding:2px 3px;min-width:22px;}
}
@media(max-width:420px){
.hy-wall{grid-template-columns:repeat(2,1fr);gap:10px;}
.hy-conv-result{grid-template-columns:1fr;}
}