/* ============================================================
   标准北京时间查询网 beijingshijian.net.cn
   全站样式 v2.1 —— 翡翠绿原创主题（日间青山绿 / 夜间松林墨绿）
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#0e9668;--primary-deep:#0b7a52;--secondary:#2fc98e;--accent:#d9820b;
--dark:#22302a;--gray:#5f6f67;--light:#f4faf7;--border:#dcebe3;
--card-bg:rgba(255,255,255,.94);--shadow:0 4px 14px rgba(16,52,40,.08);
--lunar-c:#b45f16;--warn:#e2574c;
--day-bg:linear-gradient(160deg,#0b3d2e 0%,#116b4a 45%,#17996c 100%);
--night-bg:linear-gradient(160deg,#071a14 0%,#0c2b20 50%,#123c2d 100%);
--radius:16px;
font-family:'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;padding:18px;color:var(--dark);background:var(--day-bg);transition:background .6s ease;position:relative;overflow-x:hidden;line-height:1.6}
body.night{background:var(--night-bg)}
body.night .panel,body.night .topbar{background:rgba(19,38,31,.93);color:#e6f2ec}
body.night .panel .sec-h,body.night .clock-label,body.night .page-title{color:#8fe6c0}
body.night .date-chip,body.night .w-card,body.night .sync-chip,body.night .quote-box,body.night .tool-btn{background:rgba(255,255,255,.08);color:#e6f2ec}
body.night .rich-txt,body.night .guide-list li,body.night .faq-item,body.night .w-card h4{color:#d3e4db}
body.night .flinks-box a{background:rgba(255,255,255,.08);color:#c8ecdb;border-color:rgba(255,255,255,.14)}
body.night .flinks-box a:hover{background:var(--primary);color:#fff}
a{color:var(--primary);text-decoration:none}
::selection{background:rgba(14,150,104,.25)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(110,150,135,.45);border-radius:4px}

/* 背景漂浮光斑 */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;opacity:.32;pointer-events:none}
.bg-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(94,220,170,.85),transparent 70%);pointer-events:none}
.bg-dot:nth-child(1){width:280px;height:280px;top:8%;left:6%}
.bg-dot:nth-child(2){width:190px;height:190px;top:62%;left:82%}
.bg-dot:nth-child(3){width:150px;height:150px;top:28%;left:72%}
.bg-dot:nth-child(4){width:210px;height:210px;top:18%;left:40%}
.bg-dot:nth-child(5){width:170px;height:170px;top:70%;left:22%}
@media(max-width:768px){.bg-deco{display:none}}

/* 顶栏 */
.topbar{max-width:1200px;margin:0 auto;background:var(--card-bg);border-radius:var(--radius) var(--radius) 0 0;padding:18px 30px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;flex-wrap:wrap;gap:10px}
.topbar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent))}
.brand{display:flex;align-items:center;gap:10px;font-size:1.55rem;font-weight:700;color:var(--dark)}
.brand .logo-ico{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}
.domain-pill{background:var(--light);border:1px solid var(--border);padding:7px 16px;border-radius:30px;font-weight:600;color:var(--primary);font-size:.95rem;transition:all .25s}
.domain-pill:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 主体 */
.panel{max-width:1200px;margin:0 auto;background:var(--card-bg);border-radius:0 0 var(--radius) var(--radius);padding:28px 30px;box-shadow:var(--shadow)}
.page-title{text-align:center;font-size:2rem;color:var(--primary);margin:6px 0 10px}
.page-title::after{content:"";display:block;width:76px;height:4px;border-radius:2px;background:var(--secondary);margin:12px auto 0}
.page-sub{text-align:center;color:var(--gray);font-size:1.02rem;margin-top:16px}

/* 时钟主卡片 */
.clock-card{background:linear-gradient(135deg,#eafaf2,#d3f3e4);border:1px solid rgba(35,170,120,.25);border-radius:var(--radius);padding:26px 20px;margin:26px 0;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(14,120,84,.15)}
body.night .clock-card{background:linear-gradient(135deg,#0f2a20,#0a1f17);border-color:rgba(60,190,140,.22)}
.clock-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.clock-label{font-size:1.18rem;font-weight:600;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:8px}
.clock-diff{display:inline-block;margin:12px auto 4px;padding:7px 16px;border-radius:10px;background:rgba(255,255,255,.75);font-weight:600;font-size:1rem;color:var(--accent)}
body.night .clock-diff{background:rgba(255,255,255,.08);color:#f0b45a}
.clock-diff.fast{color:var(--warn)}
.clock-diff.ok{color:var(--primary)}
body.night .clock-diff.ok{color:#8fe6c0}
.clock-big{font-size:clamp(3rem,9vw,5.6rem);font-weight:700;color:var(--primary);letter-spacing:2px;line-height:1.15;cursor:pointer;transition:font-size .3s}
.clock-ms{font-size:.48em;opacity:.85;display:inline-block;min-width:1.55em;text-align:left}
.date-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.date-chip{background:rgba(255,255,255,.78);border-radius:10px;padding:7px 16px;font-size:1.16rem;box-shadow:0 2px 6px rgba(16,52,40,.06);font-weight:500}
body.night .date-chip{box-shadow:none}
.date-chip.lunar{color:var(--lunar-c)}
.sun-line{text-align:right;color:var(--accent);font-size:1.05rem;margin:10px 4px 2px}

/* 世界时间 */
.world-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0}
.w-card{background:rgba(255,255,255,.85);border-radius:12px;padding:10px 14px;min-width:104px;text-align:center;box-shadow:0 3px 10px rgba(16,52,40,.09);transition:transform .25s,box-shadow .25s}
body.night .w-card{background:rgba(255,255,255,.07);box-shadow:none}
.w-card:hover{transform:translateY(-4px);box-shadow:0 8px 18px rgba(16,52,40,.16)}
.w-card h4{font-size:1.02rem;color:var(--gray);font-weight:500;margin-bottom:3px}
.w-time{font-size:1.5rem;font-weight:700;color:var(--primary)}
.w-date{font-size:.86rem;color:var(--gray)}
.w-date.diff{color:var(--warn)}

/* 名言 */
.quote-box{position:relative;margin:26px 0;padding:26px 60px;background:linear-gradient(135deg,rgba(238,250,244,.9),rgba(219,243,232,.9));border:1px solid rgba(80,190,145,.28);border-radius:var(--radius);text-align:center;min-height:130px;display:flex;flex-direction:column;justify-content:center}
body.night .quote-box{background:rgba(255,255,255,.06)}
.quote-box::before{content:"\201C";position:absolute;top:6px;left:18px;font-size:4.4rem;color:rgba(14,150,104,.16);font-family:Georgia,serif}
.quote-box::after{content:"\201D";position:absolute;bottom:-18px;right:18px;font-size:4.4rem;color:rgba(14,150,104,.16);font-family:Georgia,serif}
.q-text{font-size:1.34rem;font-weight:500;font-style:italic;color:#2e3d37;line-height:1.6;transition:opacity .4s,transform .4s}
.q-author{margin-top:10px;color:#1d8a63;font-weight:500;transition:opacity .4s}
.q-author::before{content:"—— "}
.q-src{font-size:.9rem;color:#82988d;margin-top:4px;transition:opacity .4s}
body.night .q-text{color:#e2f0e9}
.quote-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 12px;z-index:2}
.q-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(16,64,45,.14);background:rgba(255,255,255,.8);color:#1d8a63;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .25s}
.q-btn:hover{background:var(--primary);color:#fff;transform:scale(1.08)}
.q-fade .q-text,.q-fade .q-author,.q-fade .q-src{opacity:0}

/* 工具按钮 */
.tools-bar{display:flex;justify-content:center;margin:20px 0 6px}
.tools-inner{display:flex;gap:14px;background:rgba(255,255,255,.8);padding:10px 20px;border-radius:32px;box-shadow:0 4px 12px rgba(16,52,40,.1);flex-wrap:wrap;justify-content:center}
body.night .tools-inner{background:rgba(255,255,255,.07)}
.tool-btn{width:50px;height:50px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;box-shadow:0 4px 10px rgba(14,150,104,.3)}
.tool-btn:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(14,150,104,.4)}
.tool-btn.gray{background:#52685e}
.tool-btn.on{background:var(--accent)}
.sync-bar{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.sync-chip{background:rgba(255,255,255,.8);border-radius:9px;padding:7px 14px;font-size:.94rem;color:var(--gray);box-shadow:0 2px 5px rgba(16,52,40,.05)}
body.night .sync-chip{background:rgba(255,255,255,.07);box-shadow:none}
.sync-chip b{color:var(--primary)}
#syncLast{color:var(--accent);font-weight:600}
#syncNext{color:var(--warn);font-weight:600}

/* 内容区块 */
.sec{margin:30px 0}
.sec-h{font-size:1.32rem;color:var(--primary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.sec-h::before{content:"";width:5px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--primary),var(--secondary));flex:none}
.guide-list{list-style:none;padding-left:6px}
.guide-list li{position:relative;padding:7px 0 7px 26px;color:#39463f;font-size:1.02rem}
.guide-list li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.rich-txt p{margin:10px 0;color:#39463f;font-size:1.03rem;text-align:justify}
.rich-txt b,.rich-txt strong{color:var(--primary)}

/* FAQ 折叠 */
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--light);border:1px solid var(--border);border-radius:12px;overflow:hidden}
body.night .faq-item{background:rgba(255,255,255,.05)}
.faq-item summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--dark);list-style:none;position:relative;padding-right:40px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--primary);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{padding:0 18px 14px;color:#47554e;font-size:1rem}

/* 友情链接 */
.flinks-wrap{background:var(--light);border-radius:var(--radius);padding:16px 18px;margin:26px 0;box-shadow:var(--shadow)}
body.night .flinks-wrap{background:rgba(255,255,255,.05);box-shadow:none}
.flinks-box{display:flex;flex-wrap:wrap;gap:8px 10px}
.flinks-box a{background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px 12px;color:var(--gray);font-size:.92rem;transition:color .2s,border-color .2s;display:inline-flex;align-items:center}
body.night .flinks-box a{background:rgba(255,255,255,.07)}
.flinks-box a:hover{color:var(--primary);border-color:var(--primary)}
body.night .flinks-box a:hover{color:#8fe6c0;border-color:rgba(95,230,192,.45)}

/* 底部 */
.site-footer{text-align:center;padding:24px 0 6px;margin-top:26px;border-top:1px solid var(--border);color:var(--gray);font-size:.98rem}
body.night .site-footer{border-top-color:rgba(255,255,255,.12);color:#a8c3b6}
.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 6px;margin-bottom:14px}
.foot-nav a{color:var(--gray);padding:5px 12px;border-radius:20px;font-size:.95rem;transition:all .2s}
body.night .foot-nav a{color:#a8c3b6}
.foot-nav a:hover{background:var(--light);color:var(--primary)}
body.night .foot-nav a:hover{background:rgba(255,255,255,.08);color:#8fe6c0}
.foot-quote{font-style:italic;margin-bottom:10px;color:var(--lunar-c)}
body.night .foot-quote{color:#c9a06a}
.foot-copy{font-size:.92rem;opacity:.85}
.foot-copy a{color:var(--primary)}

/* 弹层通用 */
.overlay{position:fixed;inset:0;background:rgba(6,20,15,.55);z-index:900;display:none;backdrop-filter:blur(2px)}
.overlay.show{display:block}
.modal-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:var(--radius);padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.3);z-index:1000;display:none;width:92%;max-width:500px;max-height:88vh;overflow:hidden}
.modal-panel.show{display:flex;flex-direction:column}
.panel-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.5rem;color:var(--gray);cursor:pointer;line-height:1}
.modal-panel h3{text-align:center;margin-bottom:18px;color:var(--primary);font-size:1.35rem}

/* 设置面板 */
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-y:auto}
.opt-row{display:flex;align-items:center;justify-content:space-between;background:var(--light);border-radius:10px;padding:11px 14px}
.opt-row label{font-size:1rem;cursor:pointer;color:var(--dark)}
.switch{position:relative;width:48px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .knob{position:absolute;inset:0;background:#bfd6cb;border-radius:24px;transition:.3s;cursor:pointer}
.switch .knob::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
.switch input:checked+.knob{background:var(--primary)}
.switch input:checked+.knob::before{transform:translateX(24px)}

/* 计时器面板 */
.tab-bar{display:flex;border-bottom:2px solid var(--border);margin-bottom:14px}
.tab-btn{flex:1;text-align:center;padding:9px;cursor:pointer;font-weight:600;color:var(--gray);transition:color .2s;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab-btn.active{color:var(--primary);border-color:var(--primary)}
.tab-pane{display:none;overflow-y:auto}
.tab-pane.active{display:block}
.big-num{font-size:3rem;text-align:center;font-weight:700;color:var(--primary);font-family:Consolas,monospace;margin:16px 0}
.btn-row{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.t-btn{background:var(--primary);color:#fff;border:none;padding:10px 22px;border-radius:9px;font-size:1rem;cursor:pointer;transition:all .2s}
.t-btn:hover{background:var(--primary-deep);transform:translateY(-2px)}
.t-btn.sec{background:#52685e}
.t-btn.warn{background:var(--warn)}
.f-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.f-row label{font-weight:600;font-size:.95rem}
.f-row input{padding:11px;border-radius:9px;border:1px solid var(--border);font-size:1rem}
.alarm-item{display:flex;justify-content:space-between;align-items:center;background:var(--light);border-radius:9px;padding:10px 14px;margin-bottom:8px}
.alarm-item .a-time{font-weight:700;font-size:1.1rem}
.alarm-item .a-label{color:var(--gray);font-size:.92rem}
.lap-list{max-height:180px;overflow-y:auto;margin-top:10px}
.lap-item{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--border);font-family:Consolas,monospace}
.num-mini{width:70px;padding:10px;border-radius:9px;border:1px solid var(--border);font-size:1rem;text-align:center}

/* 万年历 */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-btn{background:var(--primary);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.05rem;cursor:pointer;transition:transform .2s}
.cal-btn:hover{transform:scale(1.08)}
.cal-title{font-size:1.25rem;font-weight:700}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;color:var(--primary);margin-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-height:56vh;overflow-y:auto}
.cal-day{background:var(--light);border-radius:8px;min-height:56px;padding:4px;text-align:center;cursor:pointer;transition:background .2s}
.cal-day:hover{background:#d9f3e7}
.cal-day.other{opacity:.4}
.cal-day.today{background:rgba(14,150,104,.15);border:2px solid var(--primary)}
.day-num{font-size:1.06rem;font-weight:700}
.day-lunar{font-size:.72rem;color:var(--lunar-c)}
.cal-tip{margin-top:12px;font-size:.92rem;color:var(--gray);text-align:center}

/* 全屏 */
.fs-exit{position:fixed;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.2);color:#fff;font-size:1.2rem;cursor:pointer;z-index:1100;display:none}
body.fs .fs-exit{display:block}
body.fs{padding:0}
body.fs .topbar,body.fs .page-title,body.fs .page-sub,body.fs .sec,body.fs .flinks-wrap,body.fs .site-footer,body.fs .tools-bar,body.fs .sync-bar,body.fs .clock-diff{display:none}
body.fs .panel{max-width:none;border-radius:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
body.fs .clock-card{background:transparent;border:none;box-shadow:none;margin:0}
body.fs .clock-big{font-size:12.5vw}
body.fs .clock-ms{font-size:.42em}
body.fs .date-chip{font-size:2.2vw}
body.fs .clock-label{font-size:2vw}
body.fs .sun-line{font-size:1.4vw;text-align:center}
body.fs .world-grid{margin:20px 0}
body.fs .w-card{min-width:130px;padding:14px}
body.fs .w-time{font-size:2.2rem}
body.fs .quote-box{max-width:760px;margin:18px auto;width:92%}

/* 闹钟提醒 */
.alarm-alert{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:30px 36px;border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.35);text-align:center;z-index:1200;display:none}
.alarm-alert h3{color:var(--warn);margin-bottom:14px}
.alarm-alert p{margin-bottom:20px;font-size:1.15rem}

/* 返回顶部 */
.back-top{position:fixed;right:22px;bottom:28px;width:48px;height:48px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(14,150,104,.35);z-index:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease,visibility .25s,box-shadow .25s}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top:hover{box-shadow:0 10px 22px rgba(14,150,104,.5)}
.back-top:active{transform:scale(.94)}
.back-top .bt-arrow{font-size:1.05rem}
.back-top .bt-txt{font-size:.58rem;margin-top:2px;letter-spacing:2px;text-indent:2px}
body.night .back-top{box-shadow:0 6px 16px rgba(0,0,0,.5)}

/* 响应式 */
@media (max-width:992px){
.clock-big{font-size:4.2rem}
}
@media (max-width:768px){
body{padding:8px}
.topbar{padding:14px 16px;justify-content:center;text-align:center}
.brand{font-size:1.25rem}
.panel{padding:16px 12px}
.page-title{font-size:1.55rem}
.date-chip{font-size:1rem;padding:6px 12px}
.quote-box{padding:22px 46px}
.q-text{font-size:1.1rem}
.opt-grid{grid-template-columns:1fr}
.tool-btn{width:44px;height:44px;font-size:1.2rem}
.world-grid{gap:9px}
.w-card{min-width:84px;padding:7px 9px}
.w-time{font-size:1.24rem}
.sun-line{text-align:center}
.back-top{right:14px;bottom:18px;width:42px;height:42px}
.back-top .bt-txt{font-size:.52rem}
}
@media (max-width:480px){
.clock-ms{display:none}
.clock-big{font-size:3.2rem}
.flinks-box a{padding:8px 13px;font-size:.92rem}
.foot-nav a{padding:4px 9px;font-size:.88rem}
}
/* 低性能设备与开启"减少动态效果"的用户：停用背景漂浮动画，节省CPU */
@media (prefers-reduced-motion:reduce){
.bg-dot{animation:none}
*{transition:none!important}
}