/* css/layout.css — Structural layout: header, main container, sections, bottom nav,
   sidebar, plan modal, hamburger, entry rows. Load after base.css. */

.header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,#FFFFFF 0%,#FAFCF8 100%);border-bottom:1px solid rgba(var(--green-rgb),0.12);padding:0 20px;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(0,0,0,0.04)}
.header-logo{display:inline-flex;align-items:center;gap:8px;cursor:default}
.header-stats{display:flex;gap:16px;align-items:center}
.header-stat{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.header-stat strong{color:var(--green);font-size:calc(16px * var(--fs,1))}
.progress-ring-wrap{position:relative;width:36px;height:36px}
.main{max-width:680px;margin:0 auto;padding:16px 16px 24px}
.section{display:none}
.section.active{display:block;animation:fadeIn 0.25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px) scale(0.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.bottom-nav{position:fixed;bottom:8px;left:12px;right:12px;z-index:100;background:rgba(255,255,255,0.82);border:1px solid rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.7);height:var(--nav-height);display:flex;padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 4px 16px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(0,0,0,0.03);border-radius:18px;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:color var(--transition-normal),transform 0.2s;color:var(--text-lighter);border:none;background:none;font-family:var(--font);font-size:calc(11px * var(--fs,1));position:relative;-webkit-tap-highlight-color:transparent;border-radius:16px;margin:4px 2px}
.nav-item.active{color:var(--green);background:rgba(var(--green-rgb),0.08)}
.nav-item.active::after{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--green);border-radius:0 0 3px 3px;animation:navSlide 0.3s ease}
.nav-item .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.nav-item .nav-icon svg{width:20px;height:20px}
.nav-item.active .nav-icon{animation:popIn 0.3s ease}
@keyframes popIn{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
/* ═══ Calculator merged layout ═══ */
/* Nav */
/* ── Liquid Glass Bottom Nav (Apple-style layered refraction) ── */
/* Nav active item glow */
.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;background:rgba(0,0,0,0.4);opacity:0;visibility:hidden;transition:all .3s ease}
.sidebar-overlay.open{opacity:1;visibility:visible}
.sidebar-panel{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;z-index:501;background:var(--card,#fff);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,0.12)}
.sidebar-overlay.open .sidebar-panel{transform:translateX(0)}
.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid var(--border,#eee)}
.sidebar-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--green),rgba(var(--green-rgb),0.62));display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.sidebar-avatar svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}
.sidebar-username{font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--text)}
.sidebar-subtitle{font-size:calc(11px * var(--fs,1));color:var(--text-lighter);margin-top:2px}
.sidebar-menu{flex:1;overflow-y:auto;padding:12px 0}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .2s;font-size:calc(14px * var(--fs,1));color:var(--text);border:none;background:none;width:100%;text-align:left}
.sidebar-item:hover,.sidebar-item:active{background:var(--section-bg,#f5f5f5)}
.sidebar-item svg{width:20px;height:20px;stroke:var(--text-light);fill:none;stroke-width:1.8;flex-shrink:0}
.sidebar-item .si-label{flex:1}
.sidebar-item .si-badge{font-size:calc(10px * var(--fs,1));color:#fff;background:var(--orange,#FF9600);padding:2px 6px;border-radius:8px}
.sidebar-divider{height:1px;background:var(--border,#eee);margin:8px 20px}
.sidebar-footer{padding:12px 20px;border-top:1px solid var(--border,#eee)}
/* === Plan Modal === */
.plan-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:600;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s}
.plan-modal-overlay.open{opacity:1;visibility:visible}
.plan-modal{background:var(--card,#fff);border-radius:20px;width:90%;max-width:360px;padding:24px 20px;transform:scale(0.9);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.plan-modal-overlay.open .plan-modal{transform:scale(1)}
.plan-modal-title{font-size:calc(18px * var(--fs,1));font-weight:800;color:var(--text);text-align:center;margin-bottom:4px}
.plan-modal-sub{font-size:calc(12px * var(--fs,1));color:var(--text-lighter);text-align:center;margin-bottom:20px}
.plan-scroll-wrap{position:relative;margin-bottom:20px}
.plan-scroll-row{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 12px;border-radius:12px;transition:all .2s}
.plan-scroll-row.active{background:var(--section-bg,#f5f5f5);border:1.5px solid var(--green)}
.plan-scroll-row:not(.active){opacity:0.45}
.plan-scroll-val{font-size:calc(20px * var(--fs,1));font-weight:800;color:var(--text);min-width:60px;text-align:center}
.plan-scroll-val small{font-size:calc(12px * var(--fs,1));font-weight:400;color:var(--text-light)}
.plan-scroll-days{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text-light);min-width:50px;text-align:center}
.plan-scroll-days small{font-size:calc(11px * var(--fs,1));font-weight:400}
.plan-arrows{display:flex;flex-direction:column;gap:4px;margin-left:8px}
.plan-arrows button{width:28px;height:24px;border:1px solid var(--border,#ddd);border-radius:6px;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-light);font-size:calc(12px * var(--fs,1));transition:all .15s}
.plan-arrows button:active{background:var(--green);color:#fff;border-color:var(--green)}
.plan-modal-btns{display:flex;gap:10px}
.plan-modal-btns button{flex:1;padding:12px;border-radius:12px;font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;transition:all .2s}
.plan-btn-cancel{border:1.5px solid var(--border,#ddd);background:var(--card);color:var(--text-light)}
.plan-btn-confirm{border:none;background:var(--green);color:#fff}
.plan-btn-confirm:active{transform:scale(0.96)}
.hamburger-btn{width:36px;height:36px;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;border-radius:8px;transition:background .2s}
.hamburger-btn:active{background:var(--section-bg,#f0f0f0)}
.hamburger-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .2s}
body.theme-dark .sidebar-panel,body.theme-darkglass .sidebar-panel{background:#1a1a1a;border-right:1px solid rgba(255,255,255,0.06)}
.qn-entry{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;margin-bottom:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.05);cursor:pointer;font-family:var(--font);text-align:left;transition:border-color .2s,transform .1s}
.qn-entry:hover{border-color:var(--green)}
.qn-entry:active{transform:scale(.99)}
.qn-entry-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--green-rgb),0.12);color:var(--green)}
.qn-entry-ic svg{width:19px;height:19px}
.qn-entry-tx{flex:1;min-width:0}
.qn-entry-t1{display:block;font-size:calc(14.5px * var(--fs,1));font-weight:700;color:var(--text)}
.qn-entry-t2{display:block;font-size:calc(11.5px * var(--fs,1));color:var(--text-light);margin-top:2px}
.qn-entry-chev{flex:0 0 auto;width:16px;height:16px;color:var(--text-lighter)}

.header, .sidebar-panel, .bk-shelf-label {
  -webkit-user-select: none; user-select: none;
}


/* ── 英语首页：词典 / 阅读 合并入口（左右并排）── */
/* 英语首页：词典 / 阅读 合并为一个展示框，中间竖向隔开（高度与旧 .qn-entry 卡片一致：13+37+13+2=65px） */
.qn-split{display:flex;align-items:stretch;margin-bottom:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.05);overflow:hidden}
.qn-split-cell{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:13px 12px;background:transparent;border:none;cursor:pointer;font-family:var(--font);text-align:left;transition:background .2s}
.qn-split-cell+.qn-split-cell{border-left:2px solid #CFCFCF}
.qn-split-cell:hover{background:rgba(var(--green-rgb),.06)}
.qn-split-cell:active{background:rgba(var(--green-rgb),.13)}
.qn-split-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--green-rgb),0.12);color:var(--green)}
.qn-split-ic svg{width:19px;height:19px}
.qn-split-tx{flex:1;min-width:0}
.qn-split-t1{display:block;font-size:calc(14.5px * var(--fs,1));font-weight:700;color:var(--text)}
.qn-split-t2{display:block;font-size:calc(11.5px * var(--fs,1));color:var(--text-light);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qn-split-chev{flex:0 0 auto;width:14px;height:14px;color:var(--text-lighter);transition:color .2s,transform .2s}
.qn-split-cell:hover .qn-split-chev{color:var(--green);transform:translateX(2px)}

/* ── 维护中入口置灰（第 30 轮：换装间暂时关闭） ── */
.sidebar-item.is-locked,
.browse-cat.is-locked{opacity:.45;filter:grayscale(.85);cursor:not-allowed!important}
.sidebar-item.is-locked .si-label{color:var(--text-light)}
.si-badge.is-soon{background:var(--text-lighter,#bbb)!important;font-size:calc(9px * var(--fs,1))}