:root{--bg-color: #f8fafc;--text-color: #111;--card-bg: #fff;--border-color: #e5e7eb;--sidebar-bg: #fff;--hover-bg: #f1f5f9}body.dark-mode{--bg-color: #0f1115;--text-color: #f1f5f9;--card-bg: #1e293b;--border-color: #334155;--sidebar-bg: #0f1115;--hover-bg: #1e293b}body{background:var(--bg-color);color:var(--text-color);margin:0;font-family:system-ui,-apple-system,sans-serif;transition:background .3s,color .3s;display:flex;flex-direction:column;height:100vh;overflow:hidden}.top-navbar{height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:var(--sidebar-bg);border-bottom:1px solid var(--border-color);z-index:1000;position:sticky;top:0;transition:transform .3s ease,margin-top .3s ease!important;box-sizing:border-box}.header-hidden{transform:none!important;margin-top:-60px!important}body.focus-mode .top-navbar{transform:translateY(0)!important;border-bottom:none}.nav-left{display:flex;align-items:center;gap:15px}.nav-right{display:flex;align-items:center;gap:8px}.icon-btn{background:none;border:none;font-size:1.2rem;color:var(--text-color);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.icon-btn:hover{background:var(--hover-bg)}.search-overlay{position:absolute;top:0;left:0;width:100%;height:60px;background:var(--sidebar-bg);display:none;align-items:center;padding:0 20px;box-sizing:border-box;z-index:40}.search-overlay.active{display:flex}.search-input-wrapper{flex:1;margin-right:10px}.search-input-wrapper input{width:100%;padding:10px 15px;border-radius:20px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);outline:none;font-size:1rem}.content-area{overflow-y:scroll!important;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 var(--bg-color)}.content-area::-webkit-scrollbar{width:14px}.content-area::-webkit-scrollbar-track{background:var(--bg-color)}.content-area::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:10px;border:3px solid var(--bg-color)}body.dark-mode .content-area{scrollbar-color:#475569 #0f1115}body.dark-mode .content-area::-webkit-scrollbar-track{background:#0f1115}body.dark-mode .content-area::-webkit-scrollbar-thumb{background-color:#475569;border:3px solid #0f1115}.mobile-menu-btn{display:none;background:none;border:none;font-size:1.5rem;color:var(--text-color);cursor:pointer;padding:0}.logo{font-size:1.2rem;font-weight:700;text-decoration:none;color:inherit;display:flex;align-items:center;gap:8px}.logo-icon{color:#ef4444;font-size:1.5rem}.main-layout{display:flex;flex:1;overflow:hidden;position:relative}.sidebar{width:220px;background:var(--sidebar-bg);border-right:1px solid var(--border-color);padding:15px 10px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;z-index:20;transition:left .3s ease}.nav-item{padding:10px 15px;text-decoration:none;color:var(--text-color);border-radius:8px;font-weight:500;display:flex;align-items:center;gap:12px}.nav-item:hover,.nav-item.active{background:var(--hover-bg);color:#ef4444}.content-area{flex:1;background:var(--bg-color);position:relative;display:flex;flex-direction:column;scroll-behavior:smooth}.site-footer{padding:20px;text-align:center;border-top:1px solid var(--border-color);font-size:14px;color:#6b7280;margin-top:auto}body.dark-mode .site-footer{color:#9ca3af}.footer-copy{margin:0}.footer-links{margin-top:8px;display:flex;flex-direction:row;justify-content:center;align-items:center}.footer-link{color:inherit;text-decoration:none;margin:0 10px}.footer-sep{opacity:.6}body.shorts-mode .top-navbar,body.shorts-mode .sidebar,body.shorts-mode .site-footer{display:none!important}body.shorts-mode .content-area{padding:0!important;background:#000;overflow-y:hidden!important}.scroll-top-btn{display:none;position:fixed;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color);box-shadow:0 4px 12px #00000026;align-items:center;justify-content:center;cursor:pointer;z-index:500;font-size:1.3rem;line-height:1;padding:0}body.dark-mode .scroll-top-btn{box-shadow:0 4px 12px #0006}@media(max-width:768px){.mobile-menu-btn{display:block}.sidebar{position:fixed;top:60px;left:0;height:calc(100vh - 60px);transform:translate(-100%);box-shadow:2px 0 15px #0003;z-index:2000}.sidebar.open{transform:translate(0)}.scroll-top-btn.visible{display:flex}.site-footer{padding-top:30px;padding-bottom:calc(30px + env(safe-area-inset-bottom))}.footer-inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:fit-content;margin:0 auto}.footer-copy{margin-bottom:12px}.footer-links{flex-direction:column;align-items:flex-start;gap:10px;margin-top:0}.footer-link{margin:0}.footer-sep{display:none}}